Question

我正在尝试从数据库中获取数据。这是一个获取请求。只要我在异步功能中使用提取的数据，一切都可以正常工作。但是，它只会返回“未定义”。我究竟做错了什么？感谢您的帮助：）

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"

Answer 1

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

但是，useEffect中的console.log是在获取数据之后执行的，因此它在那时被定义。

Answer 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) {
                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])

Answer 3

它不是特定于React的：这是一个异步函数，因此，在控制台日志发生后，promise就会解决，这就是为什么您得到undefined的原因。这只是正常的JS行为-在console.log执行时未定义值。

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

Answer 4

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

例如

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

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

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

在React的useEffect（）中获取数据将返回“未定义”

4 个答案: