setState метод вызывает «Warning: setState (...): может обновлять только смонтированный или монтажный компонент ..» ошибка

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.