实际道具未渲染（反应）答案

【问题标题】：actual props not render (react)实际道具未渲染（反应）
【发布时间】：2021-01-29 06:19:38
【问题描述】：

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

父组件

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 depencity 中删除 currentUser，我可以看到来自 previus API 调用的数据）

【问题讨论】：

当他们的道具改变时，孩子们不会更新。你必须使用他们的状态。在 state 中添加 props 数据并在需要时更改 state，这将更新组件
当你控制台子组件时你得到了什么？
@Woops 他们实际上会在道具更改时重新渲染
@ 哎呀，如果你的意思是这样的话 - 也不行 const [initUsersDatainChild, setinitUsersDatainChild] = useState(''); useEffect(() => { console.log('useEffect') setinitUsersDatainChild(currentUser) }, [ currentUser])
@Garsivirus - 我得到了渲染的实际数据

标签： reactjs render

【解决方案1】：

用下面的代码替换父组件。根据您发布的代码，您不需要使用useEffect。由于父母已经收到currentUser 并且您已经更新了状态

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

export default UserPanelContainer;

【讨论】：

@SaachiTech 在这种情况下，我有带有 previos 数据的子道具
@ALL 如果我在检查模式 chrome 中检查数据循环（带断点） - 一切正常，我得到了很好的结果
设置currentUser={currentUser}怎么样？
@SaachiTech 在这种情况下，我们进入初始条件 - 道具实际但未显示在页面上
@SaachiTech 你是什么意思 - “设置点心”？世博小吃？

【解决方案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);
  })

}

【讨论】：

@deepakgupta191199 不，我得到了 API 响应，并且这些数据来自 redux 存储的 API 调用之后。像这种模式（调用 API -> redux -> 父道具 -> 子道具（以及我在子道具中获得的子道具（在控制台中我看到它），但不在浏览器页面上）
尝试注释useEffect代码，直接在子组件中传入currentUser。
@deepakgupta191199 在这种情况下我还没有渲染

【解决方案3】：

我看到你在 useEffect 依赖数组中传递 setinitUsersData 而你需要传递实际的状态变量

试试这个，

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

而不是当前，

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

【讨论】：

@Rejo Chandran 在子节点中传递数据之前 - 我从服务器获取数据，在 redux 存储中设置后，从连接获取访问权限并传递给道具 - 如果此信息可以提供帮助如果我刷新页面或做一些渲染 - 在数据已经渲染之后。
@Rejo Chandran 我也尝试过 - 我将 set func 更改为 value - 不起作用