Question

我希望传递使用fetch API接收到的json数据，并在Useraccount组件中使用。

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

我已尝试使用此userinfo = {credentailverify}，但显然它对我不起作用，请提出任何建议

Update3： 我已上传了我要解决的问题的小片段，以便更好地理解。我试图使代码非常简单，但在显示用户帐户信息之前仍无法理解为什么登录屏幕显示的原因。 youtube link showing issue

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;

Update2：我也遇到了一件奇怪的事情，当我设置setUserinfo并将新状态传递给子级时，它确实在子级组件中显示了新状态，但是如果我尝试的话，这里在主代码中设置userinfonew后对其进行控制台，它将向我显示为空数组的初始状态，这是我在这里缺少的东西吗！

 .then((data) => {
            
        setUserinfo(data.data)   
        console.log(userinfonew)     
      }

-注意，我可以查看是否在Async函数之外运行console.log（userinfonew），但它确实显示了更新后的状态，但未显示在async函数中，尽管我正在更新内部的状态。异步功能。无法理解其背后的原因

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

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

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

在ReactJS Hooks中将数据/变量从父级传递给子级

2 个答案: