无法使用 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 函数。如果 "quotes" 未定义，或者为 null 或任何其他虚假值，它将返回虚假值并停止执行。

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