时间戳

首页 > 解决方案 > 在反应渲染中调用方法

javascript - 在反应渲染中调用方法

问题描述

this.props.models如果数组中只有一项，我正在尝试自动调用我的方法 onModelSelect

如果我将该方法附加到onClick事件处理程序，它可以工作，但就其本身而言，我不确定要使用的语法

如果我使用语法 

this.onModelSelect(model.id))

然后我得到错误：

setState(...)：在现有状态转换期间无法更新（例如内部渲染）。渲染方法应该是 props 和 state 的纯函数。

但是它确实输出到 console.log

因此，我尝试像使用onClick事件处理程序一样调用它，()=>this.onModelSelect(model.id))但这不会向 console.log 输出任何内容

调用我的方法的正确语法是什么？

 export default class App extends Component {
        onModelSelect = (modelId) => {
          this.props.selectModel(modelId);
          this.props.setModelSelected(true);
          console.log('test')
          console.log('modelId',modelId)
        }
        render() {
          return(
            <div>
              {this.props.models.length === 1 && this.props.models.map(model => ()=>this.onModelSelect(model.id))}
              {this.props.models.map(model =>
                <div onClick={()=> this.onModelSelect(model.id)}>Select Model</div>
              )}
            </div>
          )
        }
      }

标签： javascriptreactjs

解决方案

您可以通过检查模型数组的状态/道具的长度是否为 1 来在父组件中执行此操作，然后通过调用道具提供的方法来设置您正在执行的状态。您可以在设置模型数组的状态或接收模型数组的道具时执行此操作。

推荐阅读