没有 setstate 的反应状态更新，采用已删除项目的状态（已解决）

Question

我有一个 React 笔记应用程序，它有一个删除按钮，以及一个用户确认删除的状态。 一旦用户确认，“ isConfirmed ”状态将更新为 true，并从 MongoAtlas 中删除该项目，并从 App.jsx 中的 notes 数组中删除。

问题是，获取数组中已删除笔记位置的索引（通过我假设的 app.jsx 中的notes.map() ）的笔记在不调用setState的情况下将“ isConfirmed ”状态设置为 true 。 因此，在页面刷新之前，我的删除按钮不适用于该特定注释。

我已经从我的删除组件中包含了相关代码：

function DeletePopup(props) {
const mountedRef = useRef();  //used to stop useEffect call on first render

const [isConfirmed, setIsConfirmed] = useState(false);
const [show, setShow] = useState(false);


function confirmDelete() {
    // console.log("user clicked confirm");
    setIsConfirmed(true);
    // console.log(isConfirmed);
    handleClose();
}

useEffect(() => {
    // console.log("delete useEffect() run");

    if (mountedRef.current) {
        props.deleteNote(isConfirmed);
    }

    mountedRef.current = true;
}, [isConfirmed]);

注释组件：

function Note(props) {

function deleteNote(isConfirmed) {
    props.deleteNote(props.id, { title: props.title, content: props.content }, isConfirmed);
    console.log("note.deleteNote ran with confirmation boolean: " + isConfirmed);
}

return <Draggable
    disabled={dragDisabled}
    onStop={finishDrag}
    defaultPosition={{ x: props.xPos, y: props.yPos }}
>
    <div className='note'>

        <h1>{props.title}</h1>
        <p>{props.content}</p>

        <button onClick={handleClick}>
            {dragDisabled ? <LockIcon /> : <LockOpenIcon />}
        </button>
        <EditPopup title={props.title} content={props.content} editNote={editNote} />
        <DeletePopup deleteNote={deleteNote} />

    </div>
</Draggable>
}

应用组件：

function App() {
const [notes, setNotes] = useState([]);

function deleteNote(id, deleteNote, isConfirmed) {
    if (!isConfirmed) return;

    axios.post("/api/note/delete", deleteNote)
        .then((res) => setNotes(() => {
            return notes.filter((note, index) => {
                return id !== index;
            });
        }))
        .catch((err) => console.log(err));
}

return (
    <div id="bootstrap-override">
        <Header />
        <CreateArea
            AddNote={AddNote}
        />

        {notes.map((note, index) => {
            return <Note 
                key={index}
                id={index}
                title={note.title}
                content={note.content}
                xPos={note.xPos}
                yPos={note.yPos}
                deleteNote={deleteNote}
                editNote={editNote}
            />
        })}

        <Footer />
    </div>);
}

我尝试在任何地方插入日志语句，但无法弄清楚为什么会发生这种情况。 我很感激任何帮助，谢谢！

编辑：我将我的 Notes 组件更改为使用基于 MongoAtlas 对象 ID 的 ID，这解决了问题。 谢谢您的帮助！

Answer 1

这是因为您使用索引作为键。

因此，当您删除一个元素时，您调用Array.filter元素可以更改数组的索引，当 React 尝试重新呈现注释时，当索引更改时，它无法识别您已删除的注释。

尝试使用唯一的 id（例如数据库中的 id 或 UUID）作为键。

我希望它能解决你的问题！