Javascript 警告：呈现其他组件时无法更新组件。反应

在我的ReactHooks/Typescript应用程序中，我有一个导航组件，用于呈现PatientInfo组件。PatientInfo子项根据传递的道具有条件地呈现，这由另一个子组件MyPatients中的搜索框决定

在此结构中，我得到以下错误：

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;

constmypatients=（道具：{history:history}）=>{
localStorage.clear（）；
const[patientID，setPatientID]=useState(
localStorage.getItem（'myData'）| |''，
);
useffect（（）=>{
setItem（'myData'，patientID）；
}，[patientID]）；
返回(
为芬恩·恩帕西恩特设计的Søk med Personnumer

setPatientID（值）}
/>
{patientID&&
props.history.push（{pathname:'Pasient'，state:patientID}
);
};
导出默认的MyPatients；

我不熟悉这个问题，也不明白发生了什么。我的猜测是React不喜欢父组件的状态由传递给子组件的函数更新的事实，而子组件又依赖于传递给它的道具。我知道什么了吗？如果不是的话，你知道是什么原因造成的吗

---

非常感谢您的帮助。

您正在使用

历史导航。请在每个渲染上按

正如@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;

constmypatients=（道具：{history:history}）=>{
localStorage.clear（）；
const[patientID，setPatientID]=useState(
localStorage.getItem（“myData”）| |“”
);
useffect（（）=>{
setItem（“myData”，patientID）；
}，[patientID]）；
//这里有单独的效果
useffect（（）=>{
如果（第三次）{
props.history.push（{pathname:“Pasient”，state:patientID}）；
}
}，[props，patientID]）；
返回(
为芬恩·恩帕西恩特设计的Søk med Personnumer

setPatientID（值）}
/>
);
};
导出默认的MyPatients；

编辑

这可能会导致您的错误：

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



如果在
PatientInfo
渲染时调用
setName
或
setchema
，则
Navigation
状态会在
PatientInfo
渲染完成之前更新。
我认为
props.history.push应该有效将Navigation
setName
传递给孩子是个坏主意
PatientInfo
。您可能会收到其他错误谢谢您的评论，@Hmr。但是，正如下面的回答所述，错误仍然存在。有什么想法吗？好的，我明白。但是，在进行此更改时，它似乎立即错误地加载了某些内容，不允许我填充搜索字段。我还从服务器上得到了一个即时的500错误，我从服务器上得到了数据。我找到了答案。将短路添加到新的useeffect可以让应用程序按其应有的方式运行（
useeffect（（）=>{pathnetid&&props.history.push（{pathname:'Pasient'，state:patientID}）；}，[props，patientID]）；
）。。。但这仍然给了我错误。有什么想法吗？我说得太快了。错误确实仍然存在。然而，我真的不明白为什么。在写上述评论时，我没有发现错误——然后突然发现了。有什么想法吗，@Rostyslav？我似乎无法让它工作。