React todo列表未更新已编辑的任务

Question

只有当我删除现有任务或添加新任务时，编辑后的任务才会反映在浏览器上。编辑后的任务甚至会作为预先存在的任务反映在提示中，但编辑后的文本不会反映在任务中。

import * as React from 'react';
import Card from 'react-bootstrap/Card';
import Add from './Add';
import List from './List';
import Table from 'react-bootstrap/Table';
const Main = () => {
const [listData, setListData] = React.useState([]);
const listDataMani = (text) => {
const listDataObj = {
id: listData.length + 1,
text: text,
}
const finalList = [...listData, listDataObj]
setListData(finalList);
}
const listDataDelete = (id) => {
const finalData = listData.filter(function (el) {
if (el.id === id) {
return false;
} else {
return true;
}
})
setListData(finalData);
}
const editTaskHandler = (t, li) => {
let compData = listData;           // this is the function to update text
for (let i = 0; i < listData.length; i++) {
if (listData[i].id === li) {
listData[i].text = t;
} else {
return;
}
}
setListData(compData);

}

return (
<><div className='container'>
<div className='col-lg-12'>
<div className='main-component'>
<div className='title'>
<Card style={{ marginTop: "10em" }}>
<Card.Body>
<Card.Title>My Todo List</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Manages Time</Card.Subtitle>
<Add listDataMani={listDataMani} />
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Task Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<List callback={listDataDelete} editTask={editTaskHandler} list={listData} />
</tbody>
</Table>
</Card.Body>
</Card>
</div>
</div>
</div>
</div></>
)
}
export default Main;

import * as React from 'react';
const List =(props)=>{
const deleteHandler =(id)=>{
props.callback(id);
}

const editRequestHandler =(data)=>{
let editedText = prompt("Edit Your Task", data.text);
props.editTask(editedText, data.id);
}
return (
<> 
{props.list.map((el)=>(<tr>
<td>{el.id}</td>
<td>{el.text}</td>
<td>
<button onClick={function(){
deleteHandler(el.id)
}}>X</button>
<button onClick={()=>{editRequestHandler(el)}}>✍</button>
</td>
</tr>))}      
</>
)
}
export default List;

只有当我删除现有任务或添加新任务时，编辑后的任务才会反映在浏览器上。编辑后的任务甚至会作为预先存在的任务反映在提示中，但编辑后的文本不会反映在任务中。

Answer 1

您正在修改对象/数组的内部，而不更改其引用标识。

setState操作仅在React将旧数据与新数据进行比较时发生更改时才起作用。在数组和对象的情况下，它们是通过引用进行比较的(而不是通过值进行比较的数字、字符串和其他基元(。

要使用修改后的对象设置状态，需要将其重建为新对象。

以下是该问题的演示：https://codesandbox.io/s/setstate-unchanged-h249v3?file=/src/App.js

请注意一个按钮是如何打印到控制台的，而另一个则不打印。

Answer 2

您可以尝试这样做：

const editTaskHandler = (t, li) => {
setListData(
listData.map((item) => {
if (item.id === li) {
return { ...item, text: t };
}
return item;
})
);
};