在 ReactJS 钩子中将数据/变量从父级传递到子级

Question

我希望传递我使用 fetch API 收到的 JSON 数据并在用户帐户组件中使用。

我环顾四周，我可以找到很多与从孩子传给父母有关的材料，很少提到从父母传给孩子。

我试过使用此用户信息={credentailverify}，显然它对我不起作用，请提供任何建议

Update3：我已经上传了我面临的问题的小剪辑，以便更好地理解。 我试图使代码非常简单，但仍然无法理解在显示用户帐户信息之前显示登录屏幕的原因。 优酷链接显示问题

import Useraccount from "./Useraccount";
function Signin({ userinfo1, userinfo2 }) {
//userinfo1 is having customer account information
//userinfo2 is Boolean and showing if user is looged in or not if not then go to login page

return (
<div>
{userinfo2 ? (
<Useraccount userinfo={userinfo1} />
      ) : (
<SigninOptions />
      )}
    </div>
  );
}
export default Signin;

更新2：我也遇到了一件奇怪的事情，因为当我设置 setUserinfo 并将新状态传递给子组件时，它确实在子组件中显示了新状态，但在主代码中，如果我尝试在设置后控制台 userinfonew，它将初始状态显示为空数组， 是我在这里错过了什么东西！！

.then((data) => {

setUserinfo(data.data)   
console.log(userinfonew)     
}

-请注意，我可以看到如果我在异步函数之外运行控制台.log(userinfonew(，那么它确实会显示更新的状态，但不会在异步函数内显示，尽管我正在异步函数中更新状态。 无法理解背后的原因

Update1：谢谢，初始问题已解决，我已经更新了代码，现在我面临的唯一问题是我在 return 语句中使用的条件都被执行了，即首先组件执行几秒钟，然后根据逻辑执行正确的组件<用户帐户用户信息>组件不确定某处是否有延迟或代码运行两次

function Signin() {
const [siginalready, setifsignedin] = useState(false);
const [userinfonew, setUserinfo] = useState([]);
useEffect(() => {
credentailverify();
}, []);
let url = "http://localhost:5000/api/verifyifloginalready";
let options = {
credentials: "include",
method: "POST",
};
let verifyifloginalready = new Request(url, options);
let credentailverify = async () => {

const x1 = await fetch(verifyifloginalready)
.then((res) => {
if (res.status == 400 || res.status == 401) {

return setifsignedin(false);
} else {
setifsignedin(true);
return  res.json();

}
}).then((data)=> 
{
// here the console is shoewing empty array
setUserinfo(data.data)
console.log(userinfonew)     
})
.catch((err) => console.log("err"));
return x1;
};

return (
<div>
// here first <SigninOptions /> renders for a SECOND and then <Useraccount userinfo={userinfonew} />
{siginalready ? (
<Useraccount userinfo={userinfonew} />
) : (
<SigninOptions />
)}
</div>
);
}
export default Signin;

以下是用户帐户的代码，

import React, { useState, useEffect } from "react";
import "../App.css";

function Useraccount({ userinfo }) {
return <div>{ `The user email address is ${userinfo}`}</div>;
}
export default Useraccount;

在数据传递给子组件后，我如何使用它，我看到一个地方提到使用this.props.userinfo，但我使用的是 React Hook，所以无法使用此方法访问。

提前谢谢。

Answer 1

您需要访问传递给孩子的道具：

function Useraccount({ userinfo }) {
if (!userInfo) return <div />
return <div>{`The user email address is ${userinfo}`}</div>;
}

还要像我上面一样使用模板字符串

Answer 2

我的建议是跟踪状态中响应的响应，然后将该状态值传递到子组件中。

将效果视为发生在与主代码不同的执行中会很有帮助。其中的任何数据只能通过作为效果依赖项传入的函数传达给组件。