0
ContainerStatusというリストコンポーネントを持つContainersというコンポーネントがあります。警告：反応ルータを使用してナビゲートするときのComponentDidMountのsetState（...）
私が反応し、ルータをの<Link>を使用して、私のコンポーネントに移動しようとすると、私は私のコンポーネントの子供で、この警告だ：
「警告：SETSTATE（...）：専用でマウントを更新することができますがまたは取り付け部品。 "。
ただし、コンポーネントに直接リンク（localhost:3000/containers）を使用すると、警告は発生しません。
ルータ：
<Route path='/' component={App}>
<Route path='/containers' component={Containers} />
</Route>
コンテナ
renderData() {
return (
<table className={'table table-hover'}>
<thead>
<tr>
<Header>ID</Header>
<Header>Name</Header>
<Header>IMAGE</Header>
<Header>Server</Header>
<Header>Actions</Header>
</tr>
</thead>
<tbody>
{
this.props.containers.map((e, index) => (
<tr key={index}>
<td>{e.id}</td>
<td>{e.containerName}</td>
<td>{e.image}</td>
<td>{e.server.name}</td>
<td>
<ContainerStatus id={e.containerName} />
</td>
</tr>
))
}
</tbody>
</table>
)
}
render() {
return (
<div>
<StyledLink to='container' style='btn btn-primary'>Create</StyledLink>
{this.props.isFetching ? <Loader /> : this.renderData()}
</div>
)
}
ContainerStatus
class ContainerStatus extends Component {
constructor (props, context) {
super(props, context)
this.state = { container: {} }
this.fetchContainer = this.fetchContainer.bind(this)
}
getRow (element) {
return element.map((a, index) => <td key={index}>{a}</td>);
}
componentDidMount() {
this.fetchContainer()
}
fetchContainer() {
axios.get('api/containersApp/' + this.props.id)
.then(response => { this.setState({ container: response.data }); })
.catch((error) => { this.setState({ container: 'blabla' }); });
}
render() {
return (
<div>
{/* do things */}
</div>
);
}
}
私は、あなたの 'ContainerStatus'がマウントされた直後に別のページにナビゲートするときに問題があると考えます。 APIコールは 'componentDidMount'でトリガされ、完了すると既に別のページにナビゲートしている場合、現在のコードはアンマウントされたコンポーネントに対して' setState'を試みます。 –