Я попытался установить связь между двумя компонентами динамически, но он не работает
После первого изменения данные становятся 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>