單擊反應中的 setState 中的數組未清除為 null 或為空

Question

在反應中單擊時，數組未在 setState 中清除為 null 或為空。

當我單擊提交按鈕時，數組必須設置為 []。 它設置為 []，但在更改之前的項目數組進入數組。

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;

在按鈕單擊提交時，數組必須設置為 [] 並且在更改時，該值必須設置為相對於其索引的清空數組。

Answer 1

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 = []
}

Answer 2

最后，找到了解決辦法。

添加 componentDidMount 並將問題變量設置為 null 后解決了我的問題。

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

感謝大家的努力和回復！