反应：“.map 不是函数”，我应该使用 object.keys 吗？

Question

我正在做一个简单的提取，将其存储在状态中，然后尝试将该 json 输出到页面。我不明白这段代码有什么问题以及为什么我得到“hello.map 不是函数”：

Google 告诉我这可能是因为我的数据中有括号，或者更确切地说是一个对象？但我认为情况并非如此，否则向控制台吐出的数据不会说它是一个数组？：

代码可以很好地处理这样的数据：

const clients = [
    {
        client: "Client 1",
        codename: "client1"
    },
    {
        client: "Client 2",
        codename: "client2"
    }
];

上面的数据算不算有括号？

import React, {useState, useEffect} from 'react';


const Todos = () => {

  const [hello, setHello] = useState(false);

    useEffect(() => {
        fetchSomething();
    }, []);

    const fetchSomething = () => {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(json => {
                console.log(json);
                setHello(json);
            })
    }

    return (
    <div>
        
        {hello.map((client, clientIndex) => {
            return (
                <div className="tile" key={clientIndex}>
                    <span>{client.body}</span>
                </div>
            )
        })}

        
    </div>
    )
}
export default Todos;

那么我应该使用 Object.keys 之类的东西吗？：

{Object.keys(hello).map(key => {
            <span>{key.body}</span>
        })}

上述没有错误，但我似乎无法获取我认为我嵌套不够低或其他什么的数据。

我使用 .map 比使用 Object.keys 多，所以我更喜欢使用它，但我想我需要以某种方式操纵数据才能使用 .map，所以对于此类数据的推荐方法是使用 Object .keys 还是有其他流行的方法？

无论如何，我们将不胜感激。

谢谢

Answer 1

这里的问题是hello的初始状态是false。

您的组件在获取数据的效果有机会运行之前呈现，因此它尝试在false 上执行.map。

我会推荐：

• 将初始值更改为例如null: useState(null);
• 在尝试映射事物之前检查它是否是null：

if(hello === null) return <>Still loading...</>;
return hello.map(...);

Answer 2

只需将 hello 初始状态的值更改为数组即可。

const [hello, setHello] = useState([]);