在ReactJS中以api响应格式记录检查的单选按钮值

如何解决在ReactJS中以api响应格式记录检查的单选按钮值

我的API响应如下。

dat:
 mat:
  opt: Array(4)
   0: {text: "Instagram"},1: {text: "Facebook"},2: {text: "Twitter"},3: {text: "LinkedIn"}
  opts: Array(4)
   0: {text: "1"},1: {text: "2"},2: {text: "3"},3: {text: "4"}

我有4个文本（可选），如instagram，facebook，twitter和linkedin，每个文本都有4个单选按钮，其值（可选）分别为1,2,3和4。

用户可以从每个文本中选择任意一个单选按钮，该单选按钮的值将在单选按钮的标签上提及（例如：3）（选择）。

用户可以从每个text（opt）中检查和取消选中任何这些单选按钮，但是发送到数据库的最终值应采用与get api响应相同的格式，如下所示，关于opt数组。 / p>

如果用户选择了以下格式

0:
 id: "3",qn: "facebook"
1:
 id: "4",qn: "instagram"
2: 
 id: "1",qn: "linkedin"
3: 
 id: "4"
 qn: "twitter"

然后上述响应应按获取api响应的线性顺序进行，如下所示。.（应按opt（instagram-> facebook-> twitter-> linkedin）的顺序）

0:
     id: "4",qn: "instagram"
    1:
     id: "3",qn: "twitter"
    2: 
     id: "4",qn: "twitter"
    3: 
     id: "1"
     qn: "linkedin"

下面的我的代码。

let questions = [];

class App extends Component {
  constructor(props) {
    super(props);
    console.log(this.props);
    this.state = {
      btndisabled: true,questions: [],};    
  }

  changeRadioHandler = (event,j) => {
    const qn = event.target.name;
    const id = event.target.value;
    let idVal = this.props.dat.mat.opt;
    let text = this.props.dat.mat.opts;
    let userAnswer = [];    
    for (let j = 0; j < text.length; j++) {
      userAnswer.push(false);
    }
    const option = text.map((t,index) => ({
      text: t.text,userAnswer: userAnswer[index],}));
    const elIndex = option.findindex((element) => element.text === id);
    let options = [...option];
    options[elIndex] = {
      ...options[elIndex],userAnswer: true,};
    const question = {
      id: event.target.value,qn,options,}; 
    if (this.state.questions.some((question) => question.qn === qn)) {
      questions = [
        ...this.state.questions.filter((question) => question.qn !== qn),question,];
    } else {
      questions = [...this.state.questions,question];
    }    
    this.setState({ questions });
    if (questions.length === idVal.length) {
      this.setState({
        btndisabled: false,});
    }
  };
  submitHandler = () => {
    console.log("Hola",questions);    
  };

  render() {
    return (
      <div class="mat-bd">        
        {this.props.dat.mat && (
          <div class="grid">
            {this.props.dat.mat.opt.map((questions,j) => {
              return (
                <div class="rows" key={j}>
                  <div class="cell">{questions.text}</div>
                  {this.props.dat.mat.opts.map((element,i) => {
                    return (
                      <div class="cell" key={i}>
                        <input
                          type="radio"
                          id={"rad" + j + i}
                          name={questions.text}
                          value={element.text}
                          onChange={(event) =>
                            this.changeRadioHandler(event,j)
                          }
                        ></input>
                        <label htmlFor={"rad" + j + i}>{element.text}</label>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        )}
        <div class="buttonSubmit">
          <button            
            class="btn btn-primary"
            disabled={this.state.btndisabled}
            onClick={this.submitHandler}
          >
            Submit
          </button>
        </div>
      </div>
    );
  }
}

export default App;

注意： json值格式来自控制台。