为什么 array.map() 不是 function？

Question

我想 map 来自 react 的 useState 钩子的数组，但我收到错误：

类型错误：documents.map 不是 function

这是我的代码：

const [docs, setDocs] = useState(documents);

const rows = documents.map((doc) => (
    <tr key={doc.id}>
      <td>
        <Group spacing="sm">
...

“文档”来自道具。

我控制台记录了文档，它打印出一个数组。 我在这里想念什么？ 是不是因为“文档”是 state 值？

进一步澄清：我从 supabase 获取文档并希望集成实时订阅。

每当我在数据库中得到更改时，useEffect function 就会触发 setState function。 然后出现错误。 所以我不确定如何使用默认值来处理这个问题。

Answer 1

如果您想从useState挂钩 map documents ，那么您不应该 map documents （因为这是一个初始化程序，而不是 state 值）。 尝试这个：

const [docs, setDocs] = useState(documents || []);

const rows = docs.map((doc) => <tr key={doc.id}>...

Answer 2

我倾向于同意@zero298。 很可能在某些时候文档仍未完全定义。 尝试使用boolean检查：

const rows = !!documents && documents.map((doc) => {});

!!documents将返回真或假。 如果为假，则行将等于假，否则您的.map()将继续。

Answer 3

由于文档来自 props，因此您需要在其父组件中对该组件的渲染应用条件，如下所示：

  {documents && documents.length > 0 && <Child documents={documents} />}

或者，您可以为组件提供一个 defaultProps 文件，如下所示：

Component.defaultProps {
  documents:[]
}

其中 Component 是您的组件的名称。

Answer 4

如果文档属性来自道具，您必须检查它是否未定义。 如果你在 useEffect 钩子中使用它就可以做到。 将文档作为依赖注入传递并在文档未定义时添加 if 条件，然后您可以调用 function 它将使用 map 循环遍历文档

useEffect(() => {
if(props.documents !== undefined && props.documents.length > 0)
   {  /** Add logic here **/}
}, [props.documents])