Question

代码如下：

const A = (props) => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(dataActions.fetchData(personId));
  }, []);
  
  const data = useSelector(state => state.dataReducer.directory);
  console.log("fetch data:" , data);

  ....
  const renderUI = (data) => {
     //process data
     console.log("Data:", data);
     const formattedData = formatData(data);
     return (
       <Directory ....>
     )
  }

  return(
    <div>
     {renderUI(data)} // if comment this line out
    </div>
  ) 
}

两个控制台日志都显示数据未定义的错误。但是如果将 {renderUI} 注释掉，console.log 可以从 redux 返回实际数据。

为什么会发生这种情况以及如何解决？提前致谢。

如果使用：

{data && renderUI(data)}

它不会提醒错误，但即使在成功获取数据后，UI 也不会更新。我也尝试将数据放入 useEffect() 依赖项中，仍然无法在 UI 中显示任何数据。知道如何解决吗？

Answer 1

console.log("fetch data:" , data)：不要在组件体中写代码，你不知道会被执行多少次，什么时候会被执行。如果您想查看 data 的当前值，请使用 useEffect 钩子，例如：
```
useEffect(() => {
   console.log("fetch data:" , data);
},[data]);
```
console.log("Data:", data);：这里的 data 是未定义的，因为您没有将 data 传递给函数 renderUI。以这种方式修改您的代码：
```
...
return(
  <div>
    {renderUI(data)}
  </div>
) 
```

Answer 2

我认为解决方案是使用条件渲染数据

{data && <p>renderIU(data)</p>}

当组件被挂载时，你的获取结果还没有完成，数据将在完成之前创建。

Answer 3

**Hope this help you!**

import React, { useEffect, useState } from "react";
    
    const CompExample = (props) => {
      const { data } = props;
      return (
        <div>
          <p>Example code</p>
          <p>{data}</p>
        </div>
      );
    };
    
    const App = () => {
      const [data, setData] = useState(null);
    
      const formatedData = () => "test";
    
      useEffect(() => {
        setTimeout(() => {
          setData(formatedData());
        }, 2000);
      }, []);
    
      return <div className="App">{data && <CompExample data={data} />}</div>;
    };
    
    export default App;

React 功能组件 - 使用获取的数据时，获取的错误数据未定义

3 个答案: