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

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>

  {entryList.map((entry) => {

    return <EntryForm key={entry._id} entry={entry} handleEntryDelete={handleEntryDelete} />;

  })}

</div>;