反应：警告setState无法在现有状态转换期间更新（例如在渲染中）

Question

错误消息：

反应：警告setState无法在现有状态转换期间更新（例如在渲染中）

这是一个react原生应用程序，但我认为，这更多的是一个react问题。

我得到了标题中描述的错误。但我对原因感到困惑，我没有在任何父组件或子组件中设置状态。因此，我有一个孙子组件（CardLayoutResult），它呈现一个listView，每一行呈现一个新组件（Render row），该组件有一个单击事件，单击它会从props调用一个函数（onselectLayout）（从父组件（个性化组件）（父函数setCardTemplate）传递）。然后，此父函数调用父内部状态的setState。然后进行重新渲染。

为什么我得到这个错误点击？

父组件

export class Personalization extends Component {

constructor(props) {
 super(props);

 this.state = {
   showModel: true,
   editorState: {}
 };

  this.setCardTemplate = this.setCardTemplate.bind(this);
}

setCardTemplate(selectedTemplateObj){
  console.log(JSON.stringify(selectedTemplateObj));
  this.setState({
    showModel: false,
    editorState: selectedTemplateObj
  });
}

render() {
  return (
   <View>
     <CreateCardStep containerState={{showModel:this.state.showModel ,
              editorState: this.state.editorState 
              setCardTemplate:this.setCardTemplate}} />
   </View>
  )
}

子组件

const CreateCardStep = (_props)  => {
  return (
    <View>
       <CardLayoutResults containerState={_props.containerState} />
    </View>
  );
}

大孩子组件

export class CardLayoutResults extends Component {
  constructor(props) {
      super(props);
  }
  render() {

   return(

    <View>
      <ListView
        RenderRow = {(data) => <RenderRow styles={styles} rowObj={data} onSelectLayout={this.props.containerState.setCardTemplate} /> } 
    </View>    
   )
  }

渲染行

 const RenderRow = (props) => {
  let base64Image = 'data:image/png;base64,'.concat(props.rowObj.base);

 return (
 <View style={props.styles.templateImage}>
   <TouchableHighlight onPress={() => props.onSelectLayout(props.rowObj)}>
     <Image style={props.styles.thumbnail} resizeMode= {Image.resizeMode.contain} source={{uri: base64Image}}/>
   </TouchableHighlight>
 </View>
 );
};

-更新此问题似乎是在setCardTemplate函数中设置状态时出现的

Answer 1

问题在于您将道具从父组件传递给子组件的方式。

在这个片段中

 <CreateCardStep containerState={{showModel:this.state.showModel ,
          editorState: this.state.editorState 
          setCardTemplate:(val) => this.setCardTemplate(val)}} />

当将函数作为道具本身传递时，您正在调用函数，因此每次组件渲染时，都会设置状态，这很好。

但是，当您单击“渲染行”时，在完成渲染循环之前，仍将为同一属性设置组件状态，这会导致此警告。

要修复它，只需将父函数作为setCardTemplate:this传递。设置卡片模板。它将仅在按行时设置状态（并在内部调用渲染），而不是每次渲染时

Answer 2

我猜listView的renderRow调用不正确

尝试

<View>
  <ListView
    renderRow = {(data) => <RenderRow rowObj={data} onSelectLayout={this.props.containerState.setCardTemplate} />} 
   />
</View>

从个性化组件中传递道具，比如

return (
   <View>
     <CreateCardStep containerState={{showModel:this.state.showModel ,
              editorState: this.state.editorState 
              setCardTemplate:(val) => this.setCardTemplate(val)}} />
   </View>
  )   

Answer 3

您需要在构造函数中绑定setCardTemplate函数，或者从lambda函数调用它（绑定更好）

<View>
      <ListView renderRow = {(data => rowObj={data}} onSelectLayout={() => this.props.containerState.setCardTemplate} />
</View>