Я создаю небольшое веб-приложение для изучения React и столкнулся с проблемой сейчас.Моя задача - щелкнуть по названию определенного города и перейти к другому компоненту, где будет отображаться это название города.
В этом втором компоненте у меня есть одно модальное диалоговое окно, в котором я могу изменить название города.При этом мой компонент по-прежнему отображает старое название города, а не новое, которое я выбрал в модальном диалоговом окне.Когда я обновляю страницу вручную, она показывает это новое имя.Я очень новичок, чтобы реагировать и запутываться в таких вещах.Что я должен сделать, чтобы сделать обновленное название города?
SecondTable Component: (где я хочу отобразить название города)
class SecondTable extends Component {
state = {
data: [(visible: false), (city: null)]
};
componentDidMount() {
console.log(this.props);
let id = this.props.match.params.city_id;
axios
.get("http://100.124.69.3:8080/api/v1/cities/" + id)
.then(res => {
this.setState({ city: res.data.name });
console.log(res);
});
console.log(this.state.city);
}
render() {
return <div className="align1">{this.state.city}</div>;
}
}
Компонент для модального диалогового окна, из которого я выбрал новый город:
class FacilityModal extends Component {
state = {
cities:[],
}
componentDidMount()
{
console.log(this.props.visa)
await axios.get('http://100.124.68.1:8080/api/v1/cities' ).then(res => {
this.setState({cities:res.data})
});
}
render() {
let posts = (
<div >All Facilities (NCAL)
<div className = 'Modal'>
{this.state.cities.map(city =>
{
return <Link to = {'/'+city.id} key = {city.id} onClick = {this.props.onCancel}> {city.name} </Link>
})}
</div>
</div>
);
return (
<div>
<Modal
title="Change Facility"
visible={this.props.visible}
onCancel={this.props.onCancel}
footer={null}
>
<div>{posts}</div>
</Modal>
</div>
);
}
Мой домашний компонент для начального списка городов:
class Home extends Component{
state = {
cities:[],
name:''
}
componentDidMount()
{
axios.get('http://100.124.68.1:8080/api/v1/cities').then(res => {
this.setState({cities:res.data})
});
}
render(){
let postList = this.state.cities.map(city =>
{
return (
<div key = {city.id}>
<p>
<Link to = {'/'+city.id}>{city.name}</Link></p>
</div>
)
})
return(
<div className = 'align'>All Facilities (NCAL)
<div class="hr-sect">OR</div>
<div className = 'Modal1'>
{postList}
</div>
</div>
)
}
Маршруты для компонента:
render() {
return (
<div >
<BrowserRouter>
<div className="App">
<Header />
<Switch>
<Route exact path='/' component={Home} />
<Route path='/users' component={TableData} />
<Route path='/:city_id' component={SecondTable} />
</Switch>
</div>
</BrowserRouter>