时间戳

首页 > 解决方案 > 无法渲染父道具

javascript - 无法渲染父道具

问题描述

我正在使用 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？

标签： javascriptreactjsaxiosopenweathermap

解决方案

在您的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
  );
}

推荐阅读