反應待辦事項串列不更新已編輯的任務

僅當我洗掉現有任務或添加新任務時，編輯的任務才會反映在瀏覽器上。編輯后的任務甚至會在提示中反映為預先存在的任務，但編輯后的文本不會反映在任務中。

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;

僅當我洗掉現有任務或添加新任務時，編輯的任務才會反映在瀏覽器上。編輯后的任務甚至會在提示中反映為預先存在的任務，但編輯后的文本不會反映在任務中。

uj5u.com熱心網友回復：

您正在修改物件/陣列的內部而不更改其參考標識。

setState只有當 React 將舊資料與新資料進行比較時，操作才會執行任何操作。在陣列和物件的情況下，它們通過參考進行比較（與數字、字串和其他按值比較的原語相反）。

要使用修改后的物件設定狀態，您需要將其重構為新物件。

這是該問題的演示：https ://codesandbox.io/s/setstate-unchanged-h249v3?file=/src/App.js

請注意一個按鈕如何列印到控制臺，而另一個按鈕則沒有。

uj5u.com熱心網友回復：

你可以嘗試這樣做：

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

標籤：javascript反应反应钩子

上一篇：如何將Markdown組件傳遞給Astro中的React或Preact組件？

下一篇：通過事件動態修改React元素的屬性