javascript - ReactJS - Array.map 和 Keys 的行为不明确

Question

在修复一些旧代码中的错误时，我遇到了一个 input 的繁琐实现。 s 列表，如以下最小示例所示。

当您填写两个输入时，重新排序算法运行良好。
然而当只有一个 input已填充，它只是将值复制到第二个 input .
我认为这与key有关。 Array.map 的属性(property)函数 - 当前使用索引设置(这被认为是一种反模式) - 但是我没有可以用来以更有意义的方式映射数据的 ID。

我目前暂不考虑这是一个糟糕的实现，因为我想了解这些 key 的情况s(或者找出我弄错了并且错误在其他地方)。

class MyTest extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isAscending: true,
      placeholders: ['first', 'second'],
      values: [1, 2],
      customLabels: {},
    }
  }
  
  reverse() {
    const { values, placeholders, customLabels, isAscending } = this.state;
    
    const sortedData = values.map((value, index) => ({
      value,
      placeholder: placeholders[index],
      customLabel: customLabels[index],
    }))
    .sort((a, b) => (isAscending ? 1 : -1) * (b.value - a.value));

    const newPlaceholders = [];
    const newValues = [];
    const newCustomLabels = {};
    
    sortedData.forEach((dataObject, index) => {
      const { value, placeholder, customLabel } = dataObject;
    	
      newPlaceholders.push(placeholder);
      newValues.push(value);
      if (customLabel) newCustomLabels[index] = customLabel;
    });
    
    console.log({ newCustomLabels }); // Here I can verify that `customLabels` is sorted as expected
    
    this.setState({
      isAscending: !isAscending,
      placeholders: newPlaceholders,
      values: newValues,
      customLabels: newCustomLabels,
    });
  }
  
  onChange(e, index) {
    const { customLabels } = this.state;

    const newCustomLabels = Object.assign({}, customLabels);
    newCustomLabels[index] = e.target.value;

    this.setState({
      customLabels: newCustomLabels,
    })
  }
  
  render() {
    const { placeholders, customLabels, values } = this.state;
    
    return (
      <div>
        {
          placeholders.map((placeholder, index) => (
            <div key={index}>
              <input
                placeholder={placeholder}
                value={customLabels && customLabels[index]}
                onChange={(e) => this.onChange.bind(this)(e, index)}
              />
              {` with value: ${values[index]}`}
            </div>
          ))
        }
        <button onClick={this.reverse.bind(this)}>Reverse Order</button>
      </div>
    )
  }
}

ReactDOM.render(<MyTest />, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

正如评论中所说，您可以在每个渲染中创建一个唯一的键，这是可行的，但是您在受控/非受控输入方面犯了一个错误，可能您在日志中看到了一条警告告诉您这一点。这意味着输入字段值绝不能是 undefined (受控，必须设置一个 onChange 事件回调)或者是默认行为，你不能混合它们。此渲染功能将修复您的错误:

render() {
    const { placeholders, customLabels = {}, values } = this.state;

    return (
      <div>
        {placeholders.map((placeholder, index) => (
          <div key={index}>
            <input
              placeholder={placeholder}
              value={customLabels[index] || ''}
              onChange={e => this.onChange(e, index)}
            />
            {` with value: ${values[index]}`}
          </div>
        ))}
        <button onClick={this.reverse.bind(this)}>Reverse Order</button>
      </div>
    );
  }

编辑 :
沙盒链接: https://codesandbox.io/embed/zen-payne-xpern?fontsize=14&hidenavigation=1&theme=dark