为什么回调后组件不重新渲染？

Question

鉴于以下两个组件，我希望 EntryList 组件在单击 EntryForm 中的按钮后 handleEnttryDelete 中的状态发生变化后重新呈现。当前状态发生变化，但 UI 并未自行更新：

import React, { useState } from "react";

import Button from "@material-ui/core/Button";

import { render } from "@testing-library/react";

const EntryList = (props) => {

  const [entryList, setEntryList] = useState(props.data);

  const handleEntryDelete = (entry) => {

    const newState = entryList.filter(function (el) {

      return el._id != entry._id;

    });

    setEntryList(() => newState);

  };

  return (

    <div>

      {entryList.map((entry) => {

        return (

          <EntryForm entry={entry} handleEntryDelete={handleEntryDelete} />

        );

      })}

    </div>

  );

};

const EntryForm = (props) => {

  const [entry, setEntry] = useState(props.entry);

  return (

    <div>

      <Button onClick={() => props.handleEntryDelete(entry)}>

        {entry._id}

      </Button>

    </div>

  );

};

export default EntryList;

Answer 1

您的代码可能有效，但不是预期的那样。您只需要key在将数组映射到组件时使用。因此，当您删除其中一个节点时，React 可以在协调期间区分哪些元素不应被触及<div>&nbsp; {entryList.map((entry) => {&nbsp; &nbsp; return <EntryForm key={entry._id} entry={entry} handleEntryDelete={handleEntryDelete} />;&nbsp; })}</div>;