Question

我有一个名为Containers的组件，它有一个名为ContainerStatus的列表组件。

当我尝试使用 react-router 的<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>
    );
  }
}

Answer 1

您正在导航到ajax调用之间的不同页面。

更好地中止ajax调用

componentWillUnmount

方法。中止ajax调用将阻止此警告。

警告：使用react-router导航时，ComponentDidMount上的setState（...）

1 个答案: