Javascript TypeError:无法读取未定义（React）的属性“映射”

我有一个代码userPage，它假设从用户的在线JSONplaceholder获取数据，并根据ID输出数据。目前，我正在正确获取数据，但当我尝试呈现数据时，我得到错误TypeError:由于某种原因无法读取undefined的属性“map”。不知道为什么，我觉得这是一个小错误，但我已经绞尽脑汁数小时试图找出它

用户页

export const UserPage = ({match}) => {
const [data, setData] = useState({ hits: [] });

useEffect(() => {
    function getFetchUrl() {
        return `https://jsonplaceholder.typicode.com/users/${match.params.id}`;
    }

    async function fetchData() {
        const result = await axios(getFetchUrl());
        setData(result.data);
    }

    fetchData();
}, [match.params.id]);

console.log(data)
return (
    <>
        <ul>
            {data.hits.map(item => (
                <li key={item.id}>
                    <a href={item.url}>{item.title}</a>
                </li>
            ))}
        </ul>
    </>
);

}

所有的api数据都存储在hits中，但这就是在使用有效的api调用后，当I console.logdata时hits中的数据的样子

正如您所看到的，数据是正确的，但第一次运行时，会命中：Array{0}。数据是该调用后的正确输出。我觉得这可能是问题所在，但我不太确定，也不知道如何解决。另外，我不知道为什么它打了3次电话，但我也不知道这是否重要。我是React.JS的新手，所以我会在前进的过程中弄清楚所有这些事情

---

谢谢大家!

如果希望状态为对象，则需要像对象一样更新它。根据您当前的代码，您正在用从api获得的数据替换状态数据中的对象，这会导致模型中断

 async function fetchData() {
    const result = await axios(getFetchUrl());
    setData({hits: result.data}); // pass an object
}

还请注意，使用挂钩进行的状态更新不会合并状态，因此，假设对象中有多个键，并且只想更新一个键，则需要像这样进行合并和更新

setData(prev => ({
   ...prev,
   hits: result.data
}))

---

如果希望状态是一个对象，则需要像对象一样对其进行更新。根据您当前的代码，您正在用从api获得的数据替换状态数据中的对象，这会导致模型中断

 async function fetchData() {
    const result = await axios(getFetchUrl());
    setData({hits: result.data}); // pass an object
}

还请注意，使用挂钩进行的状态更新不会合并状态，因此，假设对象中有多个键，并且只想更新一个键，则需要像这样进行合并和更新

setData(prev => ({
   ...prev,
   hits: result.data
}))

---

添加一个布尔变量，将其初始化为false，然后在收到axios承诺后将其设置为true。并在该布尔值为true时控制数据

export const UserPage = ({match}) => {
const [data, setData] = useState({ hits: [] });
const [fetched, setFetched] = useState(false);
useEffect(() => {
    function getFetchUrl() {
        return `https://jsonplaceholder.typicode.com/users/${match.params.id}`;
    }

    async function fetchData() {
        const result = await axios(getFetchUrl());
        setData(result.data);
        setFetched(result.data && true);
    }

    fetchData();
}, [match.params.id]);

fetched && console.log(data)

---

我希望这将解决控制台日志中的错误。

添加一个布尔变量，将其初始化为false，然后在收到axios承诺后将其设置为true。并在该布尔值为true时控制数据

export const UserPage = ({match}) => {
const [data, setData] = useState({ hits: [] });
const [fetched, setFetched] = useState(false);
useEffect(() => {
    function getFetchUrl() {
        return `https://jsonplaceholder.typicode.com/users/${match.params.id}`;
    }

    async function fetchData() {
        const result = await axios(getFetchUrl());
        setData(result.data);
        setFetched(result.data && true);
    }

    fetchData();
}, [match.params.id]);

fetched && console.log(data)

---

我希望这将解决控制台日志的错误。

我确实需要这样做，但不幸的是，这仍然不能解决问题。数据现在保存得更好了，但我仍然看到与上面图片相同的错误。第一次运行时，按预期的：Array{0}，异步获取数据。你必须有一个加载状态我肯定需要这样做，但不幸的是，这仍然不能解决问题。数据现在保存得更好了，但我仍然看到与上面图片相同的错误。第一次运行时，按预期的：Array{0}，异步获取数据。您必须具有加载状态