Javascript react在render中调用绑定方法

我试图在render（）中调用我的方法

onModelSelect

）

如果我将其称为

this.onModelSelect（model.id））

则会得到错误

警告：setState（…）：无法在现有状态转换期间进行更新（例如在

渲染

）。渲染方法应该是道具和状态的纯函数。

但是它会输出到

控制台。log

因此，我试图像使用事件处理程序一样调用它，调用this.onModelSelect（model.id）），但这不会将任何内容输出到

控制台.log

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

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

导出默认类应用程序扩展组件{
render（）{
onModelSelect=（modelId）=>{
this.props.selectModel（modelId）；
this.props.setModelSelected（true）；
console.log（'test'）
console.log（'modelId'，modelId）
}
返回(
{this.props.models.length==1&&this.props.models.map（model=>（）=>this.onModelSelect（model.id））}
)
}
}

您不应该从渲染方法调用任何包含this.setState的内容

实际上，您的

this.onModelSelect（model.id）

将返回

Undefined function error

，因为您必须在组件中定义

onModelSelect

函数，而不是在

render（）函数中

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))}
            </div>
          )
      }
  }

导出默认类应用程序扩展组件{
onModelSelect=（modelId）=>{
this.props.selectModel（modelId）；
this.props.setModelSelected（true）；
console.log（'test'）
console.log（'modelId'，modelId）
}
render（）{
返回(
{this.props.models.length==1&&this.props.models.map（model=>（）=>this.onModelSelect（model.id））}
)
}
}
尝试将
onModelSelect
方法置于渲染方法之外
这样编写时会出现问题：

.map(model => ()=>this.onModelSelect(model.id))

这表示
.map
回调返回函数，而执行函数时需要调用该函数。相反，它应该是：

.map(model => this.onModelSelect(model.id))

另外，
.map
回调应该返回一些值，这些值将被追加到数组中，并在元素内部呈现

您应该在渲染函数外创建
onModelSelect
方法：

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))}
                </div>
              )
          }
      }

导出默认类应用程序扩展组件{
onModelSelect=（modelId）=>{
this.props.selectModel（modelId）；
this.props.setModelSelected（true）；
console.log（'test'）
console.log（'modelId'，modelId）
}
render（）{
返回(
{this.props.models.length==1&&this.props.models.map（model=>this.onModelSelect（model.id））}
)
}
}

或者，如果有一个合法的用例，并且您希望将它放在渲染函数中，则直接调用它，而不是使用此函数。考虑下面的代码：

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

导出默认类应用程序扩展组件{
render（）{
让onModelSelect=（modelId）=>{
this.props.selectModel（modelId）；
this.props.setModelSelected（true）；
console.log（'test'）
console.log（'modelId'，modelId）
};
返回(
{this.props.models.length==1&&this.props.models.map（model=>onModelSelect（model.id））}
)
}
}
ah好的，所以我已经按照建议将其移动到组件中，但仍然出现此错误。您可以看到我在问题下方的评论是否有帮助。您想做什么
render（）
应该返回要渲染的内容，但您只返回一个空的
div
并尝试调用一些方法？这是一个警告，建议您不要这样做，但不是一个错误来阻止您这样做。该警告之所以产生，是因为
this.props.selectModel
和
this.props.setModelSelected
会导致通常在
render
内部不会发生的副作用，因此您的意图可能需要一些修复。