Question

嗨，我正在做一些函数来对从API接收到的值进行排序，当我完成后，一切都很好。但是此后，即使我的代码中没有任何内容，我也开始收到奇怪的console.log消息（使工作正常后，将其删除）。我也收到一条消息，尽管我没有设置key属性。它们的来源也来自其他组件，我不知道为什么。我在下面发送图像和代码。

render() {
const {
  activeSurveys, CategoryList, IDList, activeCategory
} = this.state;
return (
  <div className="section" id="Surveys">
    <h1>
    Categories of surveys
    </h1>
    <h4>
    Choose one to fill and contribute!
    </h4>
    <div className="row">
      <div className="col-sm-6">
        {CategoryList.map((element, index, array) => (
          <div
            key={keyIndex(array, index)[index].id} // Key creator from external library
            onClick={() => this.setActiveCategory(element)}
            className={activeCategory === element ? 'CategoryElementActive' : 'CategoryElement'}
          >
            {element}
          </div>
        ))}
      </div>
      <div className="col-sm-6">
        <h3>
          Surveys to fill
        </h3>
        <div className="glyphicon glyphicon-arrow-down" />
        {activeSurveys.map((element, index, array) => (
          <div key={keyIndex(array, index)[index].id}>
            {element.Topic}
          </div>
        ))}
      </div>
    </div>
  </div>
);

}

当我单击index.js：22时，需要我从react-key-index库https://www.npmjs.com/package/react-key-index中归档：

我发现问题出在为第二个列表创建密钥。这可能是由于其内容。第一个是activeSurveys数组，第二个是CategoryList

PS。我是React的新手，所以如果我做错了一般情况，我将不胜感激。

编辑：问题已解决。 activeSurveys数组中已经有一个唯一的ID属性，因此keyIndex函数不仅没有用，而且可能必须在不同名称的属性下创建一个键。感谢所有帮助！

Answer 1

要使用react-key-index，必须使用以下代码：arr = keyIndex(arr, 1);

此代码为简单数组添加和标识，为其他数组添加_objName。

在简单数组中要小心：

['val1','val2']

更改了t

[
  {
    id: 'kRf6c2fY',
    value: 'val1'
  },
  {
    id: 'lYf5cGfM',
    value: 'val2'
  }
]

因此使用此代码：

render() {
const {
  activeSurveys, CategoryList, IDList, activeCategory
} = this.state;
CategoryList = keyIndex(CategoryList, 1); // *****
activeSurveys = keyIndex(activeSurveys, 1); // *****
return (
  <div className="section" id="Surveys">
    <h1>
    Categories of surveys
    </h1>
    <h4>
    Choose one to fill and contribute!
    </h4>
    <div className="row">
      <div className="col-sm-6">
        {CategoryList.map((element, index, array) => (
          <div
            key={element.id} // id added by keyIndex()
            onClick={() => this.setActiveCategory(element.value)} // use element.value !!!
            className={activeCategory === element.value ? 'CategoryElementActive' : 'CategoryElement'}
          >
            {element.value}
          </div>
        ))}
      </div>
      <div className="col-sm-6">
        <h3>
          Surveys to fill
        </h3>
        <div className="glyphicon glyphicon-arrow-down" />
        {activeSurveys.map((element, index, array) => (
          <div key={element._Topic}> // _Topic added by keyIndex()
            {element.Topic}
          </div>
        ))}
      </div>
    </div>
  </div>
);

我不是由我创建的React怪异console.log

1 个答案: