Reactjs 在react中映射内的if语句中调用函数

我试图映射一个数组，该数组由if-else语句的控件呈现，但我想调用if-else语句中的函数，但它不起作用。为什么?

import PropTypes from "prop-types";
import { connect } from "react-redux";
import { NavLink } from "react-router-dom";
import { getQuiz, sendResponse } from "../../actions/quizzes";
import Navbar from "../layout/navbar";

class QuizDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentStep: 0,
      selectedOption: null,
      questionId: null
    };
  }

  static propTypes = {
    user: PropTypes.object.isRequired,
    quiz: PropTypes.object,
    getQuiz: PropTypes.func.isRequired,
    sendResponse: PropTypes.func.isRequired
  };
  onSubmit = e => {
    e.preventDefault();
    console.log("boulevard");
  };
  _setQuestion = questionId => {
    console.log("me");
    this.setState({ questionId });
  };
  handleOptionChange = changeEvent => {
    this.setState({
      selectedOption: parseInt(changeEvent.target.id, 10)
    });
  };
  _next = answerId => {
    let quiztaker = this.props.quiz.quiztakers_set[0].id;
    let answer = this.state.selectedOption;
    this.props.sendResponse(quiztaker, 1, 1);
    let currentStep = this.state.currentStep;
    let arrayLength = this.props.quiz.questions_count;
    currentStep =
      currentStep >= arrayLength - 1 ? arrayLength - 1 : currentStep + 1;
    this.setState({
      currentStep,
      selectedOption: null
    });
  };

  _prev = () => {
    let currentStep = this.state.currentStep;
    currentStep = currentStep <= 0 ? 0 : currentStep - 1;
    this.setState({
      currentStep
    });
  };

  componentWillMount() {
    this.props.getQuiz(this.props.match.params.slug);
  }
  render() {
    if (!this.props.quiz) {
      return <h1>LOADING...</h1>;
    }
    let icon_next =
      this.state.currentStep === this.props.quiz.questions_count - 1
        ? "fas fa-check"
        : "fas fa-angle-right";
    let icon_prev =
      this.state.currentStep === 0 ? "d-none" : "dir_control left";
    return (
      <Fragment>
        <Navbar />
        <div className="row question">
          <div className="card col-lg-8 col-md-8 mx-auto">
            {this.props.quiz.question_set.map((question, index) => {
              let { currentStep } = this.state;

              let style = {};
              if (currentStep === index) {
                () => this._setQuestion(question.id);
                style = {
                  display: "inline-block"
                };
              } else {
                style = {
                  display: "none"
                };
              }

              return (
                <div
                  className="card-body"
                  style={style}
                  key={question.id}
                  id={index}
                >
                  <form onSubmit={this.onSubmit}>
                    <h5 className="card-title">{question.label}</h5>
                    {question.answer_set.map(answer => {
                      return (
                        <div className="answers" key={answer.id}>
                          <input
                            type="radio"
                            name={answer.question}
                            id={answer.id}
                            value={answer.text}
                            checked={this.state.selectedOption === answer.id}
                            onChange={this.handleOptionChange}
                          />

                          <label htmlFor={answer.id}>{answer.text}</label>
                          <button
                            type="submit"
                            onClick={this._prev}
                            className={icon_prev}
                          >
                            <span className="fas fa-angle-left"></span>
                          </button>
                          <button
                            type="submit"
                            onClick={this._next}
                            className="dir_control right"
                          >
                            <span className={icon_next}></span>
                          </button>
                        </div>
                      );
                    })}
                  </form>
                </div>
              );
            })}
          </div>
        </div>
      </Fragment>
    );
  }
}

const mapStateToProps = state => ({
  user: state.auth.user,
  quiz: state.quizzes.quiz.quiz
});

export default connect(
  mapStateToProps,
  { getQuiz, sendResponse }
)(QuizDetail);

从“道具类型”导入道具类型；
从“react redux”导入{connect}；
从“react router dom”导入{NavLink}；
从“../../actions/quizzes”导入{getquick，sendResponse}；
从“./layout/Navbar”导入导航栏；
类QuizDetail扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前步骤：0，
selectedOption:null，
问题编号：空
};
}
静态类型={
用户：PropTypes.object.isRequired，
测验：PropTypes.object，
GetQuike:PropTypes.func.isRequired，
sendResponse:PropTypes.func.isRequired
};
onSubmit=e=>{
e、 预防默认值（）；
控制台日志（“林荫大道”）；
};
_setQuestion=questionId=>{
console.log（“我”）；
this.setState（{questionId}）；
};
handleOptionChange=changeEvent=>{
这是我的国家({
selectedOption:parseInt（changeEvent.target.id，10）
});
};
_下一步=应答ID=>{
让quiztaker=this.props.quick.quiztaker\u集[0].id；
让answer=this.state.selectedOption；
这个.props.sendResponse（quiztaker，1,1）；
让currentStep=this.state.currentStep；
让arrayLength=this.props.quick.questions\u计数；
当前步=
currentStep>=阵列长度-1？阵列长度-1:currentStep+1；
这是我的国家({
当前步骤，
selectedOption:空
});
};
_上一页=（）=>{
让currentStep=this.state.currentStep；
currentStep=currentStep{
设{currentStep}=this.state；
让style={}；
如果（当前步骤===索引）{
（）=>这个._setQuestion（question.id）；
样式={
显示：“内联块”
};
}否则{
样式={
显示：“无”
};
}
返回(
{question.label}
{question.answer_set.map（answer=>{
返回(
{answer.text}
);
})}
);
})}
);
}
}
常量mapStateToProps=状态=>({
用户：state.auth.user，
测验：状态。测验。测验。测验
});
导出默认连接(
MapStateTops，
{GetQuike，sendResponse}
)（QuizDetail）；

无论何时我在没有任何参数的情况下尝试它，它都可以正常工作，但当我添加参数时，它根本不起作用

使用react网站上的文档无效。我已经尽了一切努力让这一切顺利。我也尝试了堆栈溢出很长一段时间，直到我决定自己问这个问题

---

p/S：我使用基于类的组件而不是功能组件

发生递归是因为您总是在

映射

中调用

设置状态

，并且如果

问题ID

相同，不要告诉组件忽略重新呈现

shouldComponentUpdate(nextProps, nextState) {
  return this.state.questionId !== nextState.questionId;
}

或者，您可以在

map

回调中添加此保护

let { currentStep, questionId } = this.state;

if (currentStep === index && questionId !== question.id) {
  this._setQuestion(question.id);
  ...
}

---

事实上，已经说过，无论怎样，这都不会起作用，因为在

渲染过程中不能调用
setState
。如果将其移动到
componentDidMount
/
componentdiddupdate

setQuestion() {
  const questionId = this.props.quiz.question_sets[this.state.currentStep];
  this.setState({ questionId });
}

componentDidMount() {
  setQuestion();
}
componentDidUpdate() {
  setQuestion();
}

你需要比“它不工作”更具体一点——你有错误吗？你想调用什么函数？你期望发生什么事？我不知道，只是没人打电话！再说一遍，什么函数？在if语句中，表示这个的函数。DOSOMETHING。我希望它调用我在renderI外部定义的函数，我可以看到你试图调用它的地方……我的观点是，示例中的任何地方都没有声明它-您在哪里声明
DOSOMETHING
？@NSJCorps第二个示例可能更适合您，因为您可能有各种属性/状态，希望触发重新渲染，这只是一个示例，向您展示了如何阻止其他渲染器我应该将地图放在哪里callback@NSJCorps呵呵？示例中的代码将替换映射回调函数中现有的
if
——为了简洁起见，我省略了其他代码。如何添加回调现在可以工作了，但我收到了以下错误
react dom.development.js:506警告：无法在现有状态转换期间更新（例如在“render”中）。渲染方法应该是道具和状态的纯函数。