Почему componentWillReceiveProps () и shouldComponentUpdate () не будут работать на моем ReactJS компоненте? - PullRequest
0 голосов
/ 01 апреля 2020

Я попытался установить связь между двумя компонентами динамически, но он не работает

После первого изменения данные становятся undefined.

Если кто-то может помочь мне с этой проблемой Я буду признателен. Данные не должны передаваться таким образом, все, что работает, нормально.

class TableInput extends React.Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
    super(props);
}
componentWillReceiveProps(newPrps){
    console.log("In")
}

shouldComponentUpdate(nextProps) {
    console.log("updated");
    return true;
}

render() {
    return (
        <table className="table table-hover">
            <thead >
            <tr>
                <th scope="col">City</th>
                <th scope="col">Temp</th>
                <th scope="col">Weather</th>
                <th scope="col">Wind</th>
                <th scope="col">Today max</th>
                <th scope="col">Today min</th>
                <th scope="col">Pressure</th>
                <th scope="col">Clouds</th>
            </tr>
            </thead>
            <tbody>
            {this.props.cities.map(city => (
                <tr>
                    <td>{city.country}<img src={"https://www.countryflags.io/"+city.country+"/shiny/32.png"} alt={city-country}/></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            ))}
            </tbody>
        </table>

    );
}
}

Родительский компонент:

            <section id="services" className="services section-bg">
                <div className="container">

                    <div className="section-title">
                        <h3>CURRENT WEATHER</h3>
                    </div>
                    <TableInput cities={this.state.citiesCurrent}/>

                </div>
            </section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...