使用带有钩子的 antD <Collapse> 在 reactJS 中设置状态的最佳方法是什么？

Question

我正在尝试在折叠中使用 setSelectedQuestion(question.id) 更新 selectedQuestion(question.id) 变量，但 question 的值是 questions.map() 的本地值。我正在寻找是否有办法提高该价值，或者是否有更好的方法来解决问题。

注意事项：antd Panel 不能 onClick / onChange，我需要手风琴道具才能工作，所以我无法将每个问题映射到

          {selectedCategory && <Collapse onChange={() => {setSelectedQuestion(question.id)
            fetchAnswersForQuestion(question.id)}} accordion>
            {questions && questions.map((question, index) => {
              return <Panel key={index}>
                <List
                  size="small"
                  // header={<div className={'font-bold'}>Answers List</div>}
                  footer={<div>
                      <input value={newAnswer} onChange={(ev) => {
                          setNewAnswer(ev.currentTarget.value);
                      }} type="text" className={'border p-1 mr-5 w-2/3'}/>
                      <button type={'button'} onClick={createNewAnswer} className={'btn btn-success'}>Add Answer</button>
                  </div>}
                  bordered
                  dataSource={question.Answers}
                  renderItem={answer => <List.Item>
                      <div>
                          {answer.answerTxt}
                      </div>

                  </List.Item>}
                  />
              </Panel>
            })}
          </Collapse>}

新的堆栈溢出，希望这是足够的/相关信息。

Answer 1

onChange 函数有一个可以使用的key 参数。您需要将面板的key 设置为question.id 而不是index，并将onChange 函数更改为(key) => setSelectedQuestion(key)