TypeError：無法讀取未定義的屬性“地圖”（反應）

Question

我有這個代碼 userPage 假設從用戶的在線 JSONplaceholder 和 output 它基於 ID 獲取數據。 目前我正在正確獲取數據，但是當我嘗試渲染它時，由於某種原因，我收到錯誤“TypeError：無法讀取未定義的屬性'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 數據都存儲在點擊中，但這就是我在 useEffect 中調用 API 后 console.log(data) 時點擊中的數據的樣子

如您所見，數據是正確的，但第一次運行時，點擊：Array{0}。 調用后數據是正確的 output。 我覺得這可能是問題所在，但我不太確定，也不知道如何解決。 另外，我不確定它為什么打了 3 次電話，但我也不知道這是否重要。 我是 React.JS 的新手，所以我正在弄清楚所有這些事情，因為我是 go。

謝謝！

Answer 1

如果您希望 state 成為 object，那么您需要像更新它一樣更新它。 根據您當前的代碼，您將 state 數據中的 object 替換為您從 api 獲得的內容，這會導致您的 Z20F35E630DAF394DDB8 中斷

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

另請注意，帶有掛鈎的 state 更新不會合並 state，因此假設您在 object 中有多個密鑰，並且您只想更新一個，您需要合並和更新它

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

Answer 2

添加一個 boolean 變量，將其初始化為false ，然后在收到 axios promise 后將其設置為true 。 並在 boolean 為真時控制您的數據。

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)

我希望這將解決控制台日志的錯誤。