javascript - 将属性传递给空组件

Question

我有一个关于 react 的问题，我希望能得到一些帮助。我会尽力解释我的情况，并在需要时提供示例。

情况:

我有这个组件:

import React , {useState} from 'react';
import axios from 'axios';
import Ui from './UI';


function App() {
  const [weather, setWeather] = useState({});
  const [query, setQuery] = useState({query : ''});


  const handleSubmit = (e) => {
    e.preventDefault();

    axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${query.query}&units=metric&appid=appid`)
        .then(res => {
            setWeather({data: res.data})

        });

  };


  const handleChange = (e) => {
    setQuery({query:e.target.value});
  };

  return (
    <div className="App">

        <form onSubmit={handleSubmit}>
            <input type="text" onChange = {handleChange}/>
            <input type="submit" value = 'Search!'/>
        </form>

        <Ui weather ={weather}/>

    </div>
  );
}

export default App;

它正在从 openweather API 获取数据。一切设置完毕后，我将天气数据传递给名为“Ui”的演示组件。

我传递给 Ui 的数据天气对象具有属性。这些属性之一看起来像“weather.data.main”。当我尝试在演示组件中访问它时，出现错误。

TypeError: Cannot read property 'main' of undefined

但我确信 main 存在。这怎么可能 ？

这是我的演示组件:

import React , {useState} from 'react';
import axios from 'axios';

function Ui(weather) {
    console.log(weather.data.main);
    return (
        <div className="Ui">
            <h2>{}</h2>
        </div>
    );
}

export default Ui;

Answer 1

第一期

weather 是传递给 Ui 组件的 prop 的一个属性，因此您需要:

1. 解构它

function Ui({ weather }) {
    console.log(weather.data.main);
    return (
        <div className="Ui">
            <h2>{weather.data.main}</h2>
        </div>
    );
}

或者使用props.weather.data.main。

function Ui(props) {
    console.log(props.weather.data.main);
    return (
        <div className="Ui">
            <h2>{props.weather.data.main}</h2>
        </div>
    );
}

第二期

TypeError: Cannot read property 'main' of undefined

现在要解决第二个问题，weather 属性在传递给 Ui 组件时可能不可用。

还有两种方法可以解决此问题。

1. 如果您想要访问的值 (weather.data.main) 仍然不可用或未定义，您可以检查并显示加载消息/gif。

(在子级别验证)

function Ui({ weather }) {
    if (weather === undefined || 
        weather.data === undefined || 
        weather.data.main === undefined)
       return <div>Loading weather data...</div>

    return (
        <div className="Ui">
            <h2>{weather.data.main}</h2>
        </div>
    );
}

或者，您可以仅在 Weather 数据可用时渲染 Ui。 (这基本上取决于您想要在组件树中的哪个位置显示加载消息/gif)。

function App() {
  // ... rest redacted for brevity
  return (
      // ... rest redacted for brevity

    {weather && weather.data && <Ui weather ={weather}/>}
  )
}

那个看起来奇怪的 && 链指示 App 仅当 weather && Weather.data 可用时才显示。

不必使用我在上面 #1 中的 Ui 组件中所做的 if 语句，&& 只是一种简写。