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>
        );
    }
}

如何使用道具连接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>;
};

无法渲染父道具

2 个答案: