Javascript 单击react中的setState时，数组未被清除为null或空

单击react时，数组在setState中未被清除为null或空

当我单击submit按钮时，数组必须设置为[]。它设置为[]，但在更改时，上一个项目数组将进入该数组

let questions = [];
let qns = [];

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

  changeRadioHandler = (event, j) => {
    this.setState({ checked: true });
    const qn = event.target.name;
    const id = event.target.value;
    let idVal = this.props.dat.mat.opts;
    let text = this.props.dat.mat.opt;
    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);
    const options = { ...option };
    options[elIndex] = {
      ...options[elIndex],
      userAnswer: true,
    };
    const question = {
      options,
      id: event.target.value,
      qn,
    };   
    questions[j] = options;
    qns = questions.filter((e) => {
      return e != null;
    });    
    console.log(qns, qns.length);
    this.setState({ qns });
    if (qns.length === idVal.length) {
      this.setState({
        btnDisabled: false,
      });
    }
  };

  submitHandler = () => {    
    console.log(this.state.qns, this.state.questions);    
    this.setState({ qns: [] }, () =>
      console.log(this.state.qns, this.state.questions)
    );
  };

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

export default App;

let questions=[]；
设qns=[]；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
是的，
//问题：[]，
};    
}
changeRadioHandler=（事件，j）=>{
this.setState（{checked:true}）；
const qn=event.target.name；
const id=event.target.value；
让idVal=this.props.dat.mat.opts；
让text=this.props.dat.mat.opt；
让userAnswer=[]；
for（设j=0；j({
text:t.text，
userAnswer:userAnswer[index]，
}));
const elIndex=option.findIndex（（element）=>element.text==id）；
const options={…option}；
选项[eLinex]={
…选项[电子索引]，
用户回答：是的，
};
常数问题={
选项，
id:event.target.value，
qn，
};   
问题[j]=选项；
qns=问题。过滤器（（e）=>{
返回e！=null；
});    
console.log（qns，qns.length）；
this.setState（{qns}）；
if（qns.length==idVal.length）{
这是我的国家({
b禁用：错误，
});
}
};
submitHandler=（）=>{
log（this.state.qns，this.state.questions）；
this.setState（{qns:[]}，（）=>
log（this.state.qns，this.state.questions）
);
};
render（）{
返回(
{this.props.dat.mat&&(
{this.props.dat.mat.opts.map（（问题，j）=>{
返回(
{问题.文本}
{this.props.dat.mat.opt.map（（元素，i）=>{
返回(
this.changeRadioHandler（事件，j）
}
>
{element.text}
);
})}
);
})}
)}
提交
);
}
}
导出默认应用程序；

---

单击“提交”按钮时，必须将数组设置为[]，更改时，必须将该值设置为与其索引相关的空数组。

最后，找到解决方案

changeRadioHandler = (event, j) => {
 // the better way is use local variable
 let questions = [];
 let qns = [];
 ...

}


submitHandler = () => {    
 console.log(this.state.qns, this.state.questions);  
 this.setState({ qns: [] }, () =>
  console.log(this.state.qns, this.state.questions)
  )}
 // clear the previous `qns`
 // if u use local variable. you don't need those lines
 // this.qns = []
 // this.questions = []
}

添加componentDidMount并将questions变量设置为null后，解决了我的问题

componentDidMount = () => {
    questions = [];
  };

---

谢谢大家的努力和回应

你的意思是

this.setState（{qns:[]}，（）=>console.log（this.state.qns，this.state.questions））

在控制台中，

this.state.qns

的值不是空的？this.state.qns（单击提交时）的值变为空，但当我在单击提交按钮后执行更改操作时，上一个数组值出现。例如，通过替换旧值将选定值插入到与索引相关的数组中。可能是因为您使用的是全局可变数组

问题
&
qns
。请仔细检查数据流，如果仍然卡住，请与问题共享一个可复制的：）在将最后一行添加到提交函数后，问题仍然存在。@skp I更新我的答案。如果不是工作。与可复制的问题共享一支笔