无法渲染父道具

Question

我正在使用openweathermap API创建一个React应用程序。现在我收到了天气数据列表。我试图突出天气，如果我点击它。

为了实现这一点，我在App.js上写道将一个道具传递给WeatherDetail.js，但到目前为止，似乎WeatherDetail.js无法识别来自其​​父级的道具。

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    state = { forecasts: [], selectedWeather: null }

    getWeather = async city => {
        const response = await weather.get('/forecast', {
            params: {
                q: city
            }
        });
            this.setState ({
                forecasts: response.data.list,
                city: response.data.city.name,
                selectedWeather: response.data.list[0]
            })            
        }
    }

    onWeatherSelectFunction = (item) => {
        this.setState({ selectedWeather: item });
    };

    render() {
        return (
            <div>
                <Form loadWeather={this.getWeather} />
                <WeatherDetail itemToChild={this.state.selectedWeather} />
                <WeatherList                     
                    onWeatherSelect={this.onWeatherSelectFunction}
                    weathers={this.state.forecasts}
                    city={this.state.city}
                />
            </div>
        );        
    }
}

export default App;

const WeatherDetail = ({forecasts, itemToChild}, props) => {
    const weather = props.itemToChild;
    if(!weather) {
        return <div>Loading...</div>;
    }
    return <div>{weather.humidity}</div> <-- This doesn't appear on screen
    );
}

const WeatherItem = ({item, onWeatherSelectFromList, humidity, city, temp }) => {

        return (
            <div>                
                <div onClick={() => onWeatherSelectFromList(item)} >
                        {city}<br /> <-- Appears on screen
                        {humidity}<br /> <-- Appears on screen
                </div>
            </div>
        );
};

const WeatherList = ({weathers, onWeatherSelect, city}) => {           
        const renderedList = weathers.map((item) => {
            return (
                <div>
                    <WeatherItem
                        city={city}
                        temp={item.main.temp}
                        humidity={item.main.humidity}
                        temperature={item.weather.icon}
                        onWeatherSelectFromList={onWeatherSelect}
                    />
                </div>
            );
        });        
        return (
            <div className="flex">
                {renderedList}
            </div>
        );
}

class Form extends React.Component {
    state = { term: '' };

    onFormSubmit = (event) => {
        event.preventDefault();

        this.props.loadWeather(this.state.term);
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}>
                        <input   
                        ref="textInput"
                        type="text" 
                        value={this.state.term} 
                        onChange={event => this.setState({term: event.target.value})}
                        />
                        <button>Get Weather</button>
                </form>
            </div>
        );
    }
}

如何使用props连接App.js和WeatherDetail.js？

Answer 1

在您的App.js文件中，您只传递一个名为itemToChild的道具

<WeatherDetail itemToChild={this.state.selectedWeather} />

在您收到预测的WeatherDetail文件中？你从redux商店得到预测吗？

const WeatherDetail = ({forecasts, itemToChild}, props) => {
  const weather = props.itemToChild;
  if(!weather) {
      return <div>Loading...</div>;
  }
  return <div>{weather.humidity}</div> <-- This doesn't appear on screen
  );
}

用这个改变你的代码。

const WeatherDetail = (props) => {
  console.log("props.itemToChild", props.itemToChild) // check this console that do you get data as you want.
  const weather = props.itemToChild;
  if(!weather) {
      return <div>Loading...</div>;
  }
  return <div>{weather.humidity}</div> <-- This doesn't appear on screen
  );
}

Answer 2

你已经对道具进行了解构，所以没有必要在WeatherDetail组件中提及props，并且在你应该删除的return语句之后还有一个额外的括号...

旧：

const WeatherDetail = ({forecasts, itemToChild}, props) => {
    const weather = props.itemToChild;
    if(!weather) {
        return <div>Loading...</div>;
    }
    return <div>{weather.humidity}</div> <-- This doesn't appear on screen
    );
}

新：

const WeatherDetail = ({ forecasts, itemToChild }) => {
  const weather = itemToChild;
  if (!weather) {
    return <div>Loading...</div>;
  }
  return <div>{weather.humidity}</div>;
};