分配嵌套地图唯一键，javascript

Question

我需要为每个输入分配自己的 ID。

const sep = words.map((word, ind) => {
  return (
     <div key={ind} className="guess__word">
       {word.split("").map((letter, id) => {
         if (letter === " ") {
           return <SpaceBox key={id} letter={letter} />;
         } else {
           return <LetterBox key={id} id={id} letter={letter} />;
         }
      })}
     </div>
   );
 });

我遇到的问题是，由于地图是嵌套的，id 的值不断重置为 0。每个单词的长度都不同，所以很难弄清楚是否有数学运算可以帮助我解决这个问题的方程式。

供参考，每个单词的长度分别为10、3、4、4。

我还需要 ID 等于单词的长度。所以我需要 id 为 0-20。

Answer 1

if kinda hard to figure out if there is a math equation that would help me solve this.

有 - 给定指标 X 和 Y，您可以映射到第 X 个素数的 Y 次方 - 但这里太过分了。只需使用字符串连接，对于键，例如索引 3 和 4 可以产生 3_4.

的键

我建议 not using .split('') 从字符串中获取字符数组 - 改为调用数组的迭代器，否则当出现奇数字符时你偶尔会运行遇到问题。

const sep = words.map((word, ind) => {
  return (
     <div key={ind} className="guess__word">
       {[...word].map((letter, id) => {
         const key = `${ind}_${id}`;
         if (letter === " ") {
           return <SpaceBox key={key} letter={letter} />;
         } else {
           return <LetterBox key={key} id={id} letter={letter} />;
         }
      })}
     </div>
   );
 });

如果单词可能会发生变化，您可能需要使用稍微不同的键来区分 SpaceBox 字母和 LetterBox 字母。

<LetterBox key={key + ' '} id={id} letter={letter} />

如果你必须只使用数组索引从 0 开始，它会更难看 - 在外面声明最后使用的数字，并在循环内使用和递增它。

let lastId = -1;
const sep = words.map((word) => {
  return (
     <div key={ind} className="guess__word">
       {[...word].map((letter) => {
         if (letter === " ") {
           return <SpaceBox key={++lastId} letter={letter} />;
         } else {
           return <LetterBox key={++lastId} id={lastId} letter={letter} />;
         }
      })}
     </div>
   );
 });

由于奇数键的要求，以上只是静态词的一个好方法。如果他们可能会改变，基于 words。

Answer 2

为了节省数学，您不妨以有意义的方式连接数字

const sep = words.map((word, ind) => {
  return (
     <div key={ind} className="guess__word">
       {word.split("").map((letter, id) => {
         const key = `${ind}-{key}`;
         if (letter === " ") {
           return <SpaceBox key={key} letter={letter} />;
         } else {
           return <LetterBox key={key} id={id} letter={letter} />;
         }
      })}
     </div>
   );
 });

分配嵌套地图唯一键，javascript

Assign Nested map unique key, javascrpit

javascript

array-map