Reactjs 实际道具不渲染（反应）

我试图在子组件中呈现实际数据，但数据不呈现。怎么了

父组件

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;

constuserpanelcontainer=（{currentUser}）=>{
const[initUsersData，setinitUsersData]=useState（currentUser）；
useffect（（）=>{
console.log（'useffect'）
setinitUsersData（（）=>getnewData（））
}，[setinitUsersData，currentUser]）
const getnewData=（）=>{
console.log（'getnewData'）
setinitUsersData（当前用户）
}
返回(
{console.log（'usepanContainerRender'）}
);
};
导出默认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;

constuserpanel=（{currentUser，hanleOnClickOut}）=>{
console.log（当前用户）；
返回(
{console.log（'userPanelRender'）}
{currentUser.displayName}
ааааimk_{currentUser.displayName}
Выйти
);
};
导出默认用户面板；

在子控制台中，我可以在道具中看到正确的实际数据，但它们并没有呈现。 实际数据包含“currentUser”属性。但在浏览器页面上，我看不到数据。。。。

---

（如果我从useEffect Dependencity中删除currentUser，我可以看到来自previus API调用的数据）

我看到您正在传递

useEffect

dependency数组中的

setinitUsersData

，而您需要传递实际的状态变量

试试这个

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

而不是现在

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

---

我看到您在

useffect

依赖项数组中传递

setinitUsersData

，而您需要传递实际的状态变量

试试这个

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

而不是现在

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

---

我认为实际数据是指一些api响应

试试这个：-

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

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

}

---

我认为实际数据是指一些api响应

试试这个：-

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

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

}

---

用以下代码替换父组件。您不需要按照您发布的代码使用

useffect

。因为父级已经接收到

currentUser

，并且您已经用它更新了状态

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

export default UserPanelContainer;

constuserpanelcontainer=（{currentUser}）=>{
const[initUsersData，setinitUsersData]=useState（currentUser）；
返回（{console.log（'usepanContainerRender'））
);
};
导出默认UserPanelContainer；

用以下代码替换父组件。您不需要按照您发布的代码使用

useffect

。因为父级已经接收到

currentUser

，并且您已经用它更新了状态

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

export default UserPanelContainer;

constuserpanelcontainer=（{currentUser}）=>{
const[initUsersData，setinitUsersData]=useState（currentUser）；
返回（{console.log（'usepanContainerRender'））
);
};
导出默认UserPanelContainer；

孩子们的道具改变时不会更新。你必须使用他们的状态。在状态中添加道具数据，并在需要时更改状态，这将更新组件当您操控它时，您在子组件中得到了什么？@Woops当道具更改时，它们实际上会重新启动@Woops，如果您的意思是这样的-不工作也const[initUsersDainchild，setinitUsersDainchild]=useState（“”）；useEffect（（）=>{console.log（'useEffect'）setInitUsersDainchild（currentUser）}，[currentUser]）@Garsivirus-我得到了renderChildren的实际数据，当他们的道具发生变化时不会更新。你必须使用他们的状态。在状态中添加道具数据，并在需要时更改状态，这将更新组件当您操控它时，您在子组件中得到了什么？@Woops当道具更改时，它们实际上会重新启动@Woops，如果您的意思是这样的-不工作也const[initUsersDainchild，setinitUsersDainchild]=useState（“”）；useffect（（）=>{console.log（'useffect'）setInitUsersDaintChild（currentUser）}，[currentUser]）@Garsivirus-我得到了render@RejoChandran在将数据传递到子级之前-我从服务器获取数据，在redux存储中设置数据之后，从“连接”获取访问权限并传递到“道具”后-如果此信息有帮助，并且如果我刷新页面或执行一些使“渲染”的操作-在数据已经渲染之后。@Rejo Chandran我也尝试过-我将“设置函数”更改为“值”-不work@RejoChandran在将数据传递到子级之前-我从服务器获取数据，在redux存储中设置数据之后，从“连接”获取访问权限并传递到“道具”后-如果此信息有帮助，并且如果我刷新页面或执行一些使“渲染”的操作-在数据已经渲染之后。@Rejo Chandran我也尝试过-我将“设置函数”更改为“值”-不work@deepakgupta191199不，我得到了API响应，这些数据来自redux商店的API调用。类似于这个模式（调用API->redux->parent props->child props（以及我在child prop中得到的child props）（在控制台中我看到了它），但不在浏览器页面上）尝试注释useEffect代码，并直接在子组件中传递currentUser。@deepakgupta191199在这种情况下，我没有渲染also@deepakgupta191199不，我得到了API响应，这些数据来自redux商店的API调用（在控制台中我看到了它），但不是在浏览器页面上）尝试注释useEffect代码并直接在子组件中传递currentUser。@deepakgupta191199在这种情况下我没有呈现also@SaachiTech在这种情况下，我的儿童道具与previosdata@ALL如果我在检查模式下检查数据循环（带断点）-所有的工作都很好，我得到了很好的结果关于设置

currentUser={currentUser}

？@SaachiTech在这种情况下，我们进入初始条件-道具实际，但没有显示在屏幕上page@SaachiTech“准备一份零食”是什么意思？世博快餐？@SaachiTech在这种情况下，我有previos的儿童道具data@ALL如果我在检查模式chrome（带断点）下检查数据循环，那么一切正常，我得到了很好的结果设置

currentUser={currentUser}

？@SaachiTech在这种情况下，我们开始