Не могу сделать родительский реквизит

Question

Я создаю приложение React с использованием openweathermap API.Прямо сейчас я получаю список данных о погоде.Я пытаюсь выделить погоду, если щелкну по ней.

Чтобы это произошло, я написал в 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, откуда вы получаете прогнозы ?Вы получаете прогнозы из магазина редуксов?

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

Вы уже деструктурировали реквизит, поэтому нет необходимости упоминать props в компоненте WeatherDetail кроме того, после оператора 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>;
};