渲染时未定义的反应对象

Question

我有一个 API 响应以下对象：-

[
  {
     "A":4,
     "B":3,
     "C":2,
     "D":1,
  }
]

我想在以下组件中显示对象数据：-

export default function name() {
  const dispatch = useDispatch();

  const { postsInfo } = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(getPostsInfo());
  }, [dispatch]);

  console.log(postsInfo[0]);

  return (
    <>
      <div className="db-wrapper">
        <div className="cards-container">
          <Card title={"A"} value={postsInfo[0].A} />
          <Card title={"B"} value={postsInfo[0].B} />
          <Card title={"C"} value={postsInfo[0].C} />
          <Card title={"D"} value={postsInfo[0].D} />
        </div>
      </div>
    </>
  );
}

但是每当呈现页面时，它都会在控制台日志中抛出错误，并且页面上没有显示任何内容。

Uncaught TypeError: Cannot read properties of undefined (reading '0')

Answer 1

欢迎使用异步编程！

Dispatch 和useEffect 是异步的。这意味着渲染函数会继续执行，而无需等待效果回调完成和分派填充您的 redux 状态。结果 postsInfo 在初始渲染中未定义，并且仅在 redux 状态更改时才在后续渲染中填充。

每当您通过异步操作在 React 组件中初始化状态时，您的渲染函数需要正确处理未初始化的状态。如果状态未初始化，'standard' 方法是 return null，如下所示：

if (!postsInfo) return null;

Answer 2

发生这种情况是因为它是一个异步进程，并且在 useEffect 结束获取数据并填充其状态之前被挂载。

要处理它，您可以使用可选链接： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

使用可选链接访问数组项：

let arrayItem = arr?.[42];

您的组件 return 将是这样的：

return (
    <>
      <div className="db-wrapper">
        <div className="cards-container">
          <Card title={"A"} value={postsInfo?.[0].A} />
          <Card title={"B"} value={postsInfo?.[0].B} />
          <Card title={"C"} value={postsInfo?.[0].C} />
          <Card title={"D"} value={postsInfo?.[0].D} />
        </div>
      </div>
    </>
  );

渲染时未定义的反应对象

React object undefined on render

reactjs

redux-toolkit