单选按钮预先填充了以前的repsonse

Question

我有一个构建矩阵网格样式问题的函数，左边有多个问题，右边的每个问题都有单选按钮响应。

我的问题是，当多次调用此函数时（你有超过1个矩阵网格问题），网格已预先填充了前一个矩阵网格问题的响应。

值得注意的是，在我的state中，来自Question1的回复没有变化，尽管已预先填充，但第二个问题的状态变量实际上是空白的，直到您开始点击

renderFieldlikert(params) {
    var count = 0;
    let matrixQuestion = params.SubFields.map(function(question, x) {
      let questionText = (<li className='left-column'><h4 className='text-left'>{question.Label}</h4></li>);
      let radioButtons = params.Choices.map(function(choice, i) {
        let val = choice.Score
        return(
          <li className='animated fadeIn'>
            <input onChange={(e) => this.props.handleRadioChange(o.ID, e)} type="radio" name={question.Label} id={++count} key={i} value={val} />
            <label htmlFor={count}>{choice.Score}</label>
          </li>
        )
      }.bind(this));

      return(
        <ul>
          {questionText}
          {radioButtons}
        </ul>
      )}.bind(this));

图片1：用户回答问题

图2：来自问题1的答案出现在问题2中

Answer 1

尝试向归还的<ul>提供唯一的key，以便React可以识别出您尝试呈现不同的独特组件。 React内部优化了它处理DOM的方式，并且如果它认为它们应该是相同的元素，则会重用HTML元素。

执行此操作的一种简单方法是使用Date.now()，每次函数返回新组件时， return( <ul key={Date.now()} > {questionText} {radioButtons} </ul> )}.bind(this)); 始终是唯一的。

renderFieldlikert()

但是，如果您在每次渲染时调用key，上述操作就不会起作用，导致React每次渲染时都会生成 new 组件而不是重复使用一样的。 param在渲染方法中使用之前应该是唯一的并生成一次。如果您传入的每个 // Maybe? return( <ul key={params.uniqueKey} > {questionText} {radioButtons} </ul> )}.bind(this)); 都有某种唯一标识符并且您使用了它，那就更好了。

.league-item-block:not(.Hidden)