.map 函數的索引，里面有方法

Question

我的代碼給了我以下錯誤：

Warning: Encountered two children with the same key, `classroom-1278238`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

我有這兩個部分使用。map 方法。 我試圖將我的代碼放在<span key={index}></span>之間並在 map 中定義“索引”，但 React JS Typescript 不接受這一點。

classroomFeatures.map((classroom_features: Types.ISelectOption) => {
                                        return (
                                          <React.Fragment key={'classroom_features-' + classroom_features.value}>
                                            <button className="multiple-info-tag small-tag text-capitalize">
                                              {classroom_features.label}
                                            </button>
                                            <br />
                                          </React.Fragment>
                                        );
                                      })

item.classroomInfo.feature_codes.map((featureCode: string) => {
                          const feature = ClassroomFeatureOptions.find(
                            (item: Types.ISelectOption) => item.value && item.value === featureCode
                          );
                          if (feature) {
                            classroomFeatures.push(feature);
                          }
                        });

Answer 1

警告：遇到兩個孩子使用相同的鑰匙， classroom-1278238 。 密鑰應該是唯一的，以便組件在更新時保持其身份。 非唯一鍵可能會導致子項被復制和/或省略——這種行為不受支持，並且可能在未來的版本中發生變化。

這里的key應該是唯一的。 為鍵生成唯一值：

key={'_'  +  Math.random().toString(36).substr(2, 9)}