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

Question

Given the following two components, I expect the EntryList component to re-render after the state changes in the handleEnttryDelete after the button in EntryForm is clicked. Currently the state changes, but the UI isn't updating itself:

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

Your code probably works, but not as intended. You just have to use key while mapping arrays to components.

Therefore, React can distinguish which elements should not be touched during reconciliation when you delete one of the nodes

<div>
  {entryList.map((entry) => {
    return <EntryForm key={entry._id} entry={entry} handleEntryDelete={handleEntryDelete} />;
  })}
</div>;