如何访问从 API 获取的 object 属性，并将它们传递到我的 React 组件中？

Question

我是 React js 的初学者，这是我的天气应用程序，它从 API 获取数据。如何使用道具将我想要传递到我的组件的数据传递？ 我尝试先访问属性并将其存储到一个变量中，然后将其传递，但它说它未定义并显示错误，我认为这是因为在我从 API 获取数据之前它无法为其分配一个值。例如，我想从天气 object 访问度值并将其传递给我的 DegreesContainer 组件。

const AppContainer = () => {
  const [query,setQuery]=useState('');
  const [weather,setWeather]=useState({});
  const search = (event) => {
    if(event.key==='Enter'){
      axios.get(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
      .then(result=>{
        setWeather(result.data);
        setQuery('');
        console.log(result);
      })
    }
  };
  return (
    <div className='app-container'>
      <Searchbar query={query} setQuery={setQuery} search={search}/>
      <DegreesContainer/> 
     
    </div>
  )
}
export default AppContainer;

Answer 1

传递一个道具将与任何其他组件相同。 例如，要传递weather object：

<DegreesContainer weather={weather} />

或者从该 object 传递单个值：

<DegreesContainer weather={weather.someValue} />

当然要注意someValue最初是undefined ，因为 object 最初是{} 。 所以接收这个道具的组件需要能够处理它而不是假设有一个值。

或者，您可以在undefined时传递默认值，例如：

<DegreesContainer weather={weather.someValue ?? ''} />

或者假设您要遍历多个属性，例如：

<DegreesContainer weather={weather.someObj.someValue} />

这将在初始渲染时失败，因为someObj是undefined 。 您可以有条件地检查：

<DegreesContainer weather={weather.someObj ? weather.someObj.someValue : ''} />

null 检查基本上从那里继续进行。 基本上任何地方的东西可能是null或undefined的，你需要在使用它之前检查它。

除非数据可用，否则还可以选择不渲染组件。 例如：

<>
  {
    weather.someObj ?
    <DegreesContainer weather={weather.someObj.someValue} /> :
    null
  }
</>

这里发生的是组件本身包含在条件检查中以查看weather.someObj是否存在。 如果没有，则组件本身在渲染中被替换为null并且根本不渲染。

（请记住，这样做的副作用可能是组件中的逻辑仅在“第一次渲染”时发生，例如具有空依赖项数组的useEffect ，可以重新调用，因为动态添加/删除组件，例如这完全卸载并重新加载它。）