Question

我正在尝试在子组件中呈现实际数据，但数据无法呈现。怎么了？

父组件

const UserPanelContainer = ({ currentUser }) => {
  

const [initUsersData, setinitUsersData] = useState(currentUser);

  useEffect(() => {
    console.log('useEffect')
    setinitUsersData(()=>getnewData())
  }, [setinitUsersData, currentUser])

const getnewData = () =>{
  console.log('getnewData')
  setinitUsersData(currentUser)
}

  return (
    
  <UserPanel currentUser={initUsersData} hanleOnClickOut={hanleOnClickOut} >{console.log('usepanContainerRender')}</UserPanel>
    
  );
};

export default UserPanelContainer;

孩子

    const UserPanel = ({ currentUser, hanleOnClickOut }) => {
    
    console.log(currentUser);
  return (
     <div className="dropdown">
        {console.log('userPanelRender')}
      <button
        className="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        <img
          className="avatar"
          src={currentUser.photoURL}
          alt="avatar"
        />
        {currentUser.displayName}
      </button>
      <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <div className="dropdown-item">
          Вошел как {currentUser.displayName}
        </div>
        <div className="dropdown-item" onClick={hanleOnClickOut}>
          Выйти
        </div>
      </div>
    </div>
  );
};

export default UserPanel;

在孩子的控制台中，我可以在道具中看到正确的实际数据，但未渲染它们。实际数据包含“ currentUser”属性。但是在浏览器页面上，我看不到数据。（如果我从useEffect依赖关系中删除currentUser，则可以看到以前的API调用中的数据）

Answer 1

我看到您正在setinitUsersData依赖项数组中传递useEffect，而您需要传递实际状态变量

尝试一下

useEffect(() => {
    ...
  }, [initUsersData, currentUser])

代替当前

useEffect(() => {
    ...
  }, [setinitUsersData, currentUser])

Answer 2

我认为，根据实际数据，您指的是一些api响应。

尝试一下：-

useEffect(() => {
    console.log('useEffect')
    getnewData(currentUser)
  }, [currentUser])

const getnewData = (currentUser) =>{
  console.log('getnewData')
  axios.get("/pathToData").then((res) => {
   console.log(res);
   setinitUsersData(res);
  })

}

Answer 3

用以下代码替换父组件。您无需按照已发布的代码使用useEffect。由于父级已经收到currentUser，并且您已经用该状态更新了

const UserPanelContainer = ({ currentUser }) => {
  const [initUsersData, setinitUsersData] = useState(currentUser);
  return (<UserPanel 
   currentUser={initUsersData} 
   hanleOnClickOut={hanleOnClickOut}>{console.log('usepanContainerRender')}</UserPanel>
  );
};

export default UserPanelContainer;

实际道具不渲染（反应）

3 个答案: