开发者问题收集

React 中的 API 数据未定义

2022-06-17
3919
javascript reactjs jsx

所以我对 React 还很陌生。我有一些代码，我使用 fetch 从 API（我创建的，结构化为 {'userData': {'overall': {'rank': '10', 'level': '99', 'xp': '200000000'}}}）获取数据，然后将其显示在屏幕上。它工作了几个小时，现在突然之间，没有触及任何代码，它就坏了。如果我发出 API 请求然后刷新页面，它会正常显示数据。但是当我再次刷新页面时，它告诉我“未捕获 TypeError：无法读取未定义的属性（读取“overall”）” 我不知道我做错了什么，我想知道是否有人可以帮助我，因为我不知道它是如何变成未定义的，它读取它很好，然后在刷新时它变为未定义的。这是我的组件代码 

function Activities() {
    let name = "three-dawg";
    function fetchPlayerData(name){
        fetch(URL)
            .then(response => response.json())
            .then(data => setPlayerData(data));
    };

    function refreshPage() {
        window.location.reload(false)
    }

    const [playerData, setPlayerData] = useState([]);
    useEffect(() => {fetchPlayerData(name)}, [name]);

    return (
        <div>
            Hello {playerData._id}
            <button onClick={() => {
                fetchPlayerData(name)
                refreshPage()
            }}>load player</button>
            <ul>
               <li>{playerData.userData.overall.rank}</li>
            </ul>
        </div>
    );
}
2个回答
const [playerData, setPlayerData] = useState([]);

您的初始状态是一个空数组，因此这是您第一次渲染时的值。数组没有 userData 属性，因此当您尝试访问 playerData.userData.overall 时会收到异常。

您需要使初始数据看起来像您的真实数据，以便 playerData.userData.overall.rank 有效，或者更有可能的是，您需要添加代码来检查您是否仍然拥有初始数据并在等待加载完成时渲染一些不同的东西。 null 或 undefined 更容易检查，因此您可能希望使用其中之一作为初始状态。 

const [playerData, setPlayerData] = useState(null);
useEffect(() => {fetchPlayerData(name)}, [name]);

if (!playerData) {
  return <div>Loading...</div>
}

return (
  <div>
   // ...the rest of your code
  </div>
)

您可能还想删除重新加载页面的代码。

Nicholas Tower
2022-06-17

好的，这个问题有一个简单的解决方法。只需在您要获取的所有数据后添加“？”。 

return (
    <div>
        Hello {playerData?._id}
        <button onClick={() => {
            fetchPlayerData(name)
            refreshPage()
        }}>load player</button>
        <ul>
           <li>{playerData?.userData.overall.rank}</li>
        </ul>
    </div>
);

数据获取是异步的，因此，当您渲染屏幕时，它首先渲染初始状态，即一个空数组。获取数据需要时间。因此，通过添加问号，渲染器会检查数据是否存在，然后才渲染您的组件。

codeVibek
2022-06-17