功能组件子组件在其父组件更新其道具后不重新呈现

Question

parentcomponent.js

let childData = 0;

function ParentComponent() {
    function handleClick() {
        childData++;
    }

    return (<>
        <button onClick={handleClick}>Increment</button>
        <ChildComponent data={childData} />
    </>);
    }

ChildComponent.js

export default function ChildComponent(props) {
    return(<p>Child Component: {props.data}</p>);
}

为什么在单击increment按钮后，子组件仍然显示旧值而不重新呈现？

Answer 1

React组件仅在状态和/或道具更新时重新呈现。由于ContainerComponent没有状态，GraphData道具也不更改，因此ContainerComponent永远不会重新发送，其子级也不会。

将状态添加到ContainerComponent。当FiltedData状态更新时，ContainerComponent将与子级一起重新Render。

function ContainerComponent(props) {
  const { graphData } = props;
  const [filteredData, setFilteredData] = React.useState([...graphData]);
  function handleClick() {
    setFilteredData((data) => data.filter((x) => x > 0));
  }

  return (
    <>
      <button onClick={handleClick}>Filter</button>
      <GraphComponent data={graphData} />
      <TableComponent data={filteredData} />
    </>
  );
}

let childData = 0;

function ContainerComponent() {
    function handleClick() {
        childData++;
    }

    return (<>
        <button onClick={handleClick}>Increment</button>
        <ChildComponent data={childData} />
    </>);
}

ChildData也不起作用，因为现在对象引用从不改变，每次只需改变相同的引用。您需要将childData存储在组件状态中，并更新该状态以将该组件更新为rerender。