reactjs - 在 React 中从 API 获取数据的问题

Question

所以我的页面上基本上有 2 个组件。第一个是用户需要输入用户名的搜索组件，第二个是显示统计信息的搜索组件

这是我在 App.js 中的 API 请求调用

useEffect(()=>{

    const fetchStats = async ()=> {
      const result = await axios.get(`https://cors-anywhere.herokuapp.com/https://public-api.tracker.gg/v2/csgo/standard/profile/steam/${username}`, 
      {
        headers: {
          'TRN-Api-Key' : '***************************',
        }
      }
    )
    
    if(username !== null){
      console.log(result.data)
      setStats(result.data)
    }
    
    }
    fetchStats()
  },[username])  

这是搜索组件

const Search = ({setInputText, setUsername, inputText, username}) => {

    const inputHandler = (e)=> {
        setInputText(e.target.value)
    }

    const searchHandler = (e)=> {
        e.preventDefault()
        setUsername(inputText)
    }

    return (
        <div>
            <form>
                <input value={inputText} onChange={inputHandler} type="text"/>
                <button onClick={searchHandler}>Search</button>
            </form>
        </div>
    )
}

我遇到的问题是，当我单击用户名组件中的按钮时，表单中的值（用户名）会存储在 App.js 中的“用户名”状态中。现在我在统计组件中使用此代码。

const Stats = ({stats}) => {
    return (
        <div>
            <h1>{stats.data.platformInfo.platformUserHandle}</h1>
        </div>
    )
}

export default Stats

应用程序启动时这里stats.data.platformInfo.platformUserHandle不存在，所以它给了我很多错误。在用户输入内容并且可以将数据发送到统计信息组件之前，如何防止应用程序崩溃？

标签： reactjsapiuse-effect