Question

在我的类组件中，我从react-redux获取API以呈现我的视图。所以我设置了一个这样的加载标志：

render() {
  const theData = this.props.theData;

  if(this.props.loading) {
    return (
      // Show loading view
    );
  }
  console.log('I am test message');  

  return (
    // This is real view want to show
  );
}

如果我运行这个，我只能看一次我的日志显示I am test message，因为我获取API成功并重新渲染视图然后传递if(this.props.loading)。

现在我想将theData与this.setState一起使用，所以我试试这样：

render() {
      const theData = this.props.theData;

      if(this.props.loading) {
        return (
          // Show loading view
        );
      }
      console.log('I am test message');  

      // Here is what i try
      this.setState({ theData });

      return (
        // This is real view want to show
      );
    }

我认为this.setState也会运行一次。但是当我运行它时，我看到错误Maximum update depth exceeded

为什么？我不知道这种情况。如果我想使用this.setState避免这个错误哪个地方应该是更好的方法？

任何帮助将不胜感激。提前谢谢。

Answer 1

this.setState({ theData });，调用此方法将导致组件再次呈现，这就是您收到错误的原因。在构造函数或API调用中使用theData设置状态。同样在构造函数中，不要使用setState方法，直接赋值。例如：this.state = {}

为什么使用this.setState会导致超出最大更新深度？

1 个答案: