2

我正在尝试从数据库中获取数据。这是一个获取请求。只要我在异步函数中使用获取的数据，一切正常。但除此之外，它只返回“未定义”。我究竟做错了什么？谢谢你的帮助 ：）

const [accountInfos, setAccountInfos] = useState();
      const [error, setError] = useState();
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        (async function runEffect() {
            const fetchedAccountInfos =  await fetchAccountInfos();
            if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
                console.log(fetchedAccountInfos)  //This console.log works
                setAccountInfos(fetchedAccountInfos);
                setLoading(false);
                console.log(accountInfos)  //This console.log returns 
                                             "undefined"
              } else {
                setError("Accountdaten können nicht geladen werden!");
                setLoading(false);
                };
        })();
      }, []);
      console.log(accountInfos);  //This console.log returns "undefined"
4

5 回答 5

3

它不是特定于 React 的：这是一个异步函数，因此在控制台日志出现后，promise 将得到解决，这就是你得到undefined. 这只是正常的 JS 行为——在执行 console.log 时该值是未定义的。

在您定义 JSX 的返回值中，如果accountinfos为 null，则呈现 null（或某些空状态组件），否则根据 API 的返回值呈现实际组件。收到响应后，状态将更新，组件将重新渲染

于 2019-11-19T13:03:22.083 回答
0

您没有做错任何事情，useEffect 之外的 console.log 仅在初始组件函数调用上执行一次，因此当时 accountInfos 变量仍未定义。

但是，useEffect 中的 console.log 是在获取数据后执行的，所以它是在那个时候定义的。

于 2019-11-19T13:02:01.420 回答
0

试试这个只是为了看看结果？

      const [accountInfos, setAccountInfos] = useState();
      const [error, setError] = useState();
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        (async function runEffect() {
            const fetchedAccountInfos =  await fetchAccountInfos();
            if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
                setAccountInfos(fetchedAccountInfos);
                setLoading(false);
                console.log(accountInfos)  //This console.log works
              } else {
                setError("Accountdaten können nicht geladen werden!");
                setLoading(false);
                };
        })();
      }, []);
      console.log(accountInfos);  //This console.log returns "undefined"

      useEffect(() => {
        console.log(accountInfos); //check the result here
      }, [accountInfos])
于 2019-11-19T13:02:35.737 回答
0

由于大多数答案已经说明了它引起的问题，即 JS 的异步性质。解决此问题的解决方案是简单地使用条件语句或三元运算符。

const [accountInfos, setAccountInfos] = useState();
  const [error, setError] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async function runEffect() {
        const fetchedAccountInfos =  await fetchAccountInfos();
        if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
            console.log(fetchedAccountInfos)  //This console.log works
            setAccountInfos(fetchedAccountInfos);
            setLoading(false);
            if(accountInfos){
                //console the output only if available
                 console.log(accountInfos);
            }
          } else {
            setError("Accountdaten können nicht geladen werden!");
            setLoading(false);
            };
    })();
  }, []);
  console.log(accountInfos);  //This console.log returns "undefined"

如果渲染组件并在 useEffect 挂钩中获取一些数据，则相同的方法很有用。

{
   dataIsReturned ? <RenderYourData/> : <h1> Loading </h1>
}
于 2021-12-22T08:47:21.680 回答
-1

为了获取更新后的值，然后根据该值执行一些操作，您需要使用useEffect钩子

例如

const [toggle, setToggle] = useState(false);

useEffect(() => {
   // do something based on new value of toggle
}, [toggle]);

const trigger = () => {
  setToggle(true);
  // OR
  //setToggle(t => !t);
}

于 2019-11-19T13:04:46.257 回答