Question

问题是组件在axios promise中的setState方法之后再次呈现两次，一次是初始状态。为什么会发生这种情况，我该如何解决这个问题。

我已经使用了componentWillMount和componentDidMount。我，作为一个菜鸟，努力尝试，未能找出原因。

export default class Dashboard extends Component{

  constructor(props) {
    super(props)
    this.state = {
      data: {
        okay: 'lul'
      }
    }
  }

  componentWillMount() {
    axios
      .get('/api/data?param1='+this.props.location.state.param1+'&param2='+this.props.location.state.param2)
      .then(res => {
        if (res.status != 401) {
          if(res.err)
            console.log('Error while retrieving: ', res.err)
          else {
            this.setState({
              data: res.data.data
            })
          }
        } else {
          console.log('Unauthorized!');
        }
      })
  }

  render() {
    return (
        <Segment inverted vertical>
          <CardContainer data={this.state.data}/>
        </Segment>
    )
  }
}

非常感谢与react / JS /一般编程相关的基本建议

Answer 1

你在componentWillMount中有一个异步请求，所以在请求完成之前，你的组件会被渲染，但是一旦异步请求成功，你就会有一个setState函数调用触发重新渲染，因此你的组件会被渲染两次

这是预期的行为。

您可以查看此问题以获取更多详细信息

Use componentWillMount or componentDidMount lifecycle functions for async request in React

根据文档

在安装发生之前调用

componentWillMount()。它在render（）之前调用，因此在此方法中调用 setState() synchronously 不会触发额外的渲染。

这意味着如果你写

componentWillMount() {
   this.setState({count: 1});
}

状态将反映在初始渲染本身中，并且触发无渲染。但是，如果您有异步方法，那么在调用渲染之后，如果异步请求完成，则在其中调用setState可能会触发额外的渲染。

为了更多地强调事实，您不能再使用componentWillMount，因为React正在将此方法从未来的主要版本中移除。而是使用componentDidMount。

为什么这个反应组件渲染两次？

1 个答案: