Question

如果this.props.models数组中只有1个项目，我试图自动调用方法onModelSelect

{this.props.modelCheck && <div>{this.props.modelCheck.map(item => {()=>this.onModelSelect(item.id)} )}</div>}

如果我将方法附加到onClick事件处理程序上，则它可以工作，但是就我自己而言，我不确定使用的语法，因为在组件呈现时它什么都不做

 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.modelCheck && <div>{this.props.modelCheck.map(item => {()=>this.onModelSelect(item.id)} )}</div>}
              {this.props.models.map(model =>
                <div onClick={()=> this.onModelSelect(model.id)}>Select Model</div>
              )}
            </div>
          )
        }
      }

      const mapStateToProps = (state) => {
        const modelCheck = getFilteredSelectableModels(state).length === 1 && getFilteredSelectableModels(state)

        return {
          modelCheck,
        };
      };

      const mapDispatchToProps = (dispatch) => {
        return bindActionCreators({
          ...settingDropActions,
        }, dispatch);
      };

      export default connect(mapStateToProps, mapDispatchToProps)(SettingDropModel);

Answer 1

为什么要将这一行添加到渲染方法中：

{this.props.models.length === 1 && this.props.models.map(model => ()=>this.onModelSelect(model.id))}

首先，应使用react JSX中的.map来生成元素数组，这在这里没有发生。因此，此实现不正确。

如果只有一个模型，则要调用onModelSelect方法，应在componentDidMount react lifecycle方法中调用它。

componentDidMount(){
    if(this.props.models.length === 1){
        this.onModelSelect(this.props.models[0].id);
    }
}

Answer 2

放在componentDidMount()时不起作用，但是放在componentWillReceiveProps()中时起作用

componentWillReceiveProps(nextProps) {
    if(this.props.models.length === 1){
      this.onModelSelect(this.props.models[0].id);
    }
  }

在render中反应调用方法

2 个答案: