Question

以下代码cityNameLength是一个数字，代表一个城市名称的长度。我的目标是根据cityNameLength值渲染多个元素。因此，如果cityNameLength等于5，我希望有5个span元素。

这就是我所拥有的：

class myCitiesClass extends Component {
  constructor(props) {
      super(props);
      this.state = {cLength: 0};
      this.setState({ cLength: this.props.cityNameLength });
  }


  renderDivs() { 
    var products = []

    var cNameLength = this.state.cLength
    for (var p = 0; p < cNameLength; p++){
      products.push( <span className='indent' key={p}>{p}</span> );
    }
    return products
  }

  render() {    
    return (
      <View>
        <Text>City name length: {this.props.cityNameLength}</Text>
        <View>{this.renderDivs()}</View>
      </View>
    );
  }
}

这是我得到的错误：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

Answer 1

有两种方法可以做到这一点。如果要在安装组件之前渲染跨度，请删除setState并在构造函数中执行此操作：

this.state= {cLength: this.props.cityNameLength };

如果您希望首先安装组件 - 然后从构造函数中删除setState并将其移到componentDidMount()：

componentDidMount() {
  this.setState({ cLength: this.props.cityNameLength });
}

Answer 2

您不能在构造函数中使用this.setState。幸运的是，你不需要。可以在赋值中将状态设置为正确的值：

constructor(props) {
      super(props);
      this.state = { cLength: this.props.cityNameLength };
}

但是，这段代码也不好。从道具中分配状态不一定是错误，但你必须清楚知道你正在做什么以及为什么（事情是道具可以随时从顶层组件改变，并且您必须使状态与被覆盖的componentWillReceiveProps()保持同步才能使您的组件正常工作。如果你怀疑，你应该避免它。

在你的情况下，你应该很容易，因为你根本不需要国家。删除构造函数，并使用this.props.cityNameLength代替this.state.cLength。

当您从componentDidMount()修改状态时，您应该知道非常好您正在做什么（因为您在组件之后立即触发另一个渲染刚刚渲染 - 为什么？）。在99％的情况下，这是错误的。尽管如此，在componentDidUpdate中这样做并不致命。

setState方法导致“警告：setState（...）：只能更新已安装或安装的组件..”错误

2 个答案: