使用状态在 React 中显示节点 MySQL 结果

Question

我的 node.js MySQL 查询返回包含在 [RowPacketData] 中的单行，我通常可以使用 results[0].ID 访问 ID 字段。

但是，当我将结果存储在 React 状态（使用钩子）时，它不起作用。我可以访问结果对象，但不能访问其中的字段。

function MyReactComponent() {
  const [dbEntry, setDbEntry] = useState();

  useEffect(() => {
    const fetchData = async () => {
      const result = await queryFunc(`SELECT * FROM table LIMIT 1`);

      console.log(result[0]); // <-- Works (shows [RowDataPacket] object)
      console.log(result[0].ID); // <-- Works (shows ID)

      setDbEntry(result);
    };

    fetchData();
  }, []);

  console.log(dbEntry[0]); // <-- Works (shows [RowDataPacket] object)
  console.log(dbEntry[0].ID); // <-- TypeError: Cannot read property '0' of undefined

  return (
    <p>
      {dbEntry[0].ID} // <-- How do I render here?
    </p>
  )
}

这里发生了什么？我有一种感觉 React 正在以某种方式强制 result 对象，但我无法弄清楚......

Answer 1

当您需要显示来自异步字体的数据（例如 API 调用）时，有可能（实际上几乎可以肯定）在第一次渲染发生时它不可​​用，以解决实际上存在你可以做几件事：

占位符状态

您可以将数据的外观描述为您的初始状态的模型，因此属性将不再是未定义的：

const [state, setState] = useState({
    data:[
        {name: ''}
    ]
})

假设您的数据将以这种格式访问state.data[0].name 不会引发错误。这在某些情况下可能很有用，但我个人不喜欢这种方法。

条件渲染

在每次渲染时，您应该检查一个条件，并且只有在满足时才渲染这段代码：

return(
    <>
        <div>Title</div>
        {Boolean(state.data.length) && <div>{state.data[0].name}</div>}
    </>
)

悬念

那是全新的，如果你有一个组件在渲染它的内容之前不需要执行副作用，你应该在执行异步操作时显示一个备用内容。

<Suspense fallback={<span>Loading</span>}>
    <MYAsyncComponent />
</Suspense>