警告：渲染其他组件时无法更新组件。 ReactJS

Question

在我的ReactHooks / Typescript应用中，我有一个Navigation组件，该组件呈现PatientInfo组件。根据另一个子组件MyPatients中的搜索框确定，PatientInfo子项将根据传递的道具有条件地呈现。

在此结构中，出现以下错误：

Navigation.tsx：

// code....
<Route exact path="/" component={MyPatients} />
<Route
    exact
    path="/Pasient"
    render={() => (
         <PatientInfo
              setName={setName}
              setSchema={setSchema}
              patientID={patientID}
          />
    )}
/>
// code....

我的患者：

const MyPatients = (props: { history: History }) => {
    localStorage.clear();
    const [patientID, setPatientID] = useState(
        localStorage.getItem('myData') || '',
    );

    useEffect(() => {
        localStorage.setItem('myData', patientID);
    }, [patientID]);
    return (
        <>
            <div className="search-container"></div>
            <Row gutter={[60, 40]} justify={'center'}>
                <Col span={1000}>
                    <p>Søk med personnummer for å finne en pasient</p>
                    <Search
                        style={{ width: 400 }}
                        className="search-bar"
                        placeholder="Søk etter en pasient!"
                        onSearch={(value: string) => setPatientID(value)}
                    />
                </Col>
            </Row>
            {patientID &&
                props.history.push({ pathname: 'Pasient', state: patientID })}
        </>
    );
};
export default MyPatients;

我对这个问题并不熟悉，也不了解发生了什么。我的有根据的猜测是，React不喜欢这样的事实，即父组件的状态由传递给子代的函数来更新，而子代函数又取决于与之一起传递的道具。我在做某事吗？是否有什么原因的任何想法？

感谢您的帮助。

Answer 1

您正在每个渲染上浏览history.push。

正如评论中提到的@HMR一样，您必须从JSX模板中删除导航并将其添加到单独的效果中。

const MyPatients = (props: { history: History }) => {
  localStorage.clear();
  const [patientID, setPatientID] = useState(
    localStorage.getItem("myData") || ""
  );

  useEffect(() => {
    localStorage.setItem("myData", patientID);
  }, [patientID]);

  // separate effect here
  useEffect(() => {
    if (patientID) {
      props.history.push({ pathname: "Pasient", state: patientID });
    }
  }, [props, patientID]);

  return (
    <>
      <div className="search-container"></div>
      <Row gutter={[60, 40]} justify={"center"}>
        <Col span={1000}>
          <p>Søk med personnummer for å finne en pasient</p>
          <Search
            style={{ width: 400 }}
            className="search-bar"
            placeholder="Søk etter en pasient!"
            onSearch={(value: string) => setPatientID(value)}
          />
        </Col>
      </Row>
    </>
  );
};
export default MyPatients;

编辑

这可能会导致您的错误：

<PatientInfo
  setName={setName}
  setSchema={setSchema}
  patientID={patientID}
/>

如果您在setName的渲染上调用setSchema或PatientInfo，则Navigation状态将在更新PatientInfo之前进行更新