下面是父組件和子組件，我只想在父組件中更改狀態后更新子組件。
我正在創建一個作為子組件的表，并將資料從父級傳遞給子級，并觸發從子級到父級的洗掉功能。資料在父母中被洗掉，但沒有發送給孩子。
任何幫助都是可觀的！！
家長
import React, { useState } from "react";
import Pagination from "./components/Pagination.js";
import { Table } from "./components/Table.js";
import { useEffect } from "react";
import "./App.css";
function App() {
const [tableData, setTableData] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => setTableData(data))
}, [])
const deleteRowData = (id) => {
tableData.map((row, ind) => {
if (id === row.id) {
console.log(id);
tableData.splice(ind, 1);
console.log(tableData);
setTableData(tableData);
}
})
}
// console.log(tableData)
return (
<div className="App">
<div className="container py-4">
<Table tableData={tableData} deleteRowData={deleteRowData} />
</div>
</div>
);
}
export default App;
孩子
import react from "react";
import { useEffect } from "react";
export const Table = (props) => {
console.log("table component");
return (<div><table>
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
{props.tableData.map((row, ind) => {
return (<tr key={row.id}>
<td>{row.id}</td>
<td>{row.title}</td>
<td>Edit</td>
<td onClick={() => props.deleteRowData(row.id)}>Delete</td>
</tr>)
})}
</tbody>
</table>
</div>)
}
uj5u.com熱心網友回復：
問題是您正在修改陣列并設定傳遞相同陣列（參考相同陣列）的新狀態，并且如果進行淺比較時狀態沒有改變，則默認情況下反應不會重新渲染子資料。
而是修改deleteRowData。您需要創建新陣列（在這種情況下，過濾器采用當前陣列并回傳新陣列而不修改舊陣列）；
const deleteRowData = (id) => {
const updatedData = tableData.filter(row => row.id !== id);
setTableData(updatedData);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/494691.html
標籤：javascript 反应 反应式 反应钩子 反应还原