TypeError：无法读取未定义（反应）的属性“地图”

Question

我有这段代码userPage，它假定是从用户的在线JSONplaceholder获取数据并根据ID输出的。当前，我正在正确地获取数据，但是由于某种原因，当我尝试呈现数据时，出现错误“ TypeError：无法读取未定义的属性'map'”。不知道为什么，我觉得这是一个小错误，但是我花了好几个小时试图找出答案。

UserPage

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数据都存储在匹配中，但这是匹配中的数据的样子，当我在useEffect中进行API调用后我console.log（data）时

如您所见，

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

谢谢！

Answer 1

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

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

还要注意，带有钩子的状态更新不会合并状态，因此假设您在对象中有多个键，并且您只想更新一个，则需要像这样合并和更新它

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

Answer 2

添加一个布尔变量，将其初始化为import 'money2.dart'; Currency usdCurrency = Currency.create('USD', 2); // Create money from an int. Money costPrice = Money.fromInt(1000, usdCurrency); print(costPrice.toString()); > $10.00 final taxInclusive = costPrice * 1.1; print(taxInclusive.toString()) > $11.00 print(taxInclusive.format('SCC #.00')); > $US 11.00 // Create money from an String using the `Currency` instance. Money parsed = usdCurrency.parse(r'$10.00'); print(parsed.format('SCCC 0.0')); > $USD 10.00 // Create money from an int which contains the MajorUnit (e.g dollars) Money buyPrice = Money.from(10); print(buyPrice.toString()); > $10.00 // Create money from a double which contains Major and Minor units (e.g. dollars and cents) // We don't recommend transporting money as a double as you will get rounding errors. Money sellPrice = Money.from(10.50); print(sellPrice.toString()); > $10.50 ，然后在收到axios promise后将其设置为false。并在此布尔值为true时管理数据。

true

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