无法使用 map() 方法循环访问 React JS 上的状态

Question

我在用对象映射数组时遇到问题，我找不到问题是什么，但我认为这是因为异步，但我想让你看看。

我收到两条错误消息，我不知道它们是否相关：

1. TypeError: Cannot read property 'map' of null
2. 1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

import {useState, useEffect} from 'react';
// import styled from 'styled-components';
export default function Admin() {
const [quotes, setQuotes] = useState(null);
const get_all_quotes = async () => {
const {data, error} = await supabase
.from('quotes_en')
.select('quote')
console.log(data);
if (error) console.table(error)
setQuotes(data)
}
useEffect(() => {
get_all_quotes()
}, [])
return (
<div>
{quotes.map(({id, quote}) => {
return <p key={id}>{quote}</p>
})
}
</div>
)
}

Answer 1

问题

初始quotes状态值为null，因此无法映射。

const [quotes, setQuotes] = useState(null);

解决方案

提供有效的初始状态，我建议使用空数组([](。

const [quotes, setQuotes] = useState([]);

现在，您将拥有可以映射到初始渲染上的有效quotes状态。Array.prototype.map可以安全地处理空数组。

{quotes.map(({id, quote}) => {
return <p key={id}>{quote}</p>
})}

Answer 2

正如@DrewReese所说，您可以将state的初始值设置为空数组，也可以选择使用有条件地显示引号

{quotes && quotes.map(({id, quote}) => {
return <p key={id}>{quote}</p>
})

这段代码所做的是，它将检查引号是否有任何值，如果只有，它将调用quotes.map((函数。

更新：我们还可以使用可选的链接，它比条件链接(如上所述的短路(更可读。

{quotes?.map(({id, quote}) => {
return <p key={id}>{quote}</p>
})

上面的代码所做的是检查是否有引号，如果只有引号，它将调用map函数。如果"；引号"如果未定义，或者为null或任何其他falsy值，则它将返回falsy的值并停止执行。

这些解决方案的优点是，即使在任何情况下，引号没有数组，它也不会引起任何问题，但不会执行该代码。感谢@DrewReese提供的此解决方案。