无法使用 map() 方法在 React JS 上循环遍历 State

Question

我在通过包含对象的数组进行映射时遇到问题，我找不到问题所在，但我认为这是因为异步，但我希望您看一下。

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

TypeError: Cannot read property 'map' of null
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状态值为空，因此无法映射。

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 或任何其他虚假值，它将 return 虚假值并停止执行。

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

无法使用 map() 方法在 React JS 上循环遍历 State

Can't loop throught State on React JS with map() method

javascript

reactjs

use-state

问题

解决方案