.map 返回数组中的第一个值

Question

世界……又来了。

我被一些本来应该很简单的东西难住了，但现在我看不到它。我正在尝试映射一个简单的数组并显示值。每张卡片都应该有一个按钮，用于打开 bs 模式，该模式应该显示有关特定数组对象的更多信息。但它仅返回数组中第一个对象的信息。

我认为这里有一个我没有理解的概念，这有点令人尴尬。感谢您的帮助。

import "./styles.css";

export default function App() {
  const modalInfo = [
    { name: "james", number: "1" },
    { name: "Jackie", number: "2" },
    { name: "Ariane", number: "3" },
    { name: "Mike", number: "4" }
  ];
  return (
    <>
      <div className="App">
        {modalInfo.map((info) => (
          <div className="card">
            <h1>{info.name}</h1>
            <button
              type="button"
              class="btn btn-primary"
              data-bs-toggle="modal"
              data-bs-target="#staticBackdrop"
            >
              Show more
            </button>

            <div
              class="modal fade"
              id="staticBackdrop"
              data-bs-backdrop="static"
              data-bs-keyboard="false"
              tabindex="-1"
              aria-labelledby="staticBackdropLabel"
              aria-hidden="true"
            >
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">
                      #{info.number}
                    </h5>
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div class="modal-body">{info.name}</div>
                  <div class="modal-footer">
                    <button
                      type="button"
                      class="btn btn-secondary"
                      data-bs-dismiss="modal"
                    >
                      Close
                    </button>
                    <button type="button" class="btn btn-primary">
                      Understood
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

这是控制台中的当前错误，我从沙箱复制了代码并使用引导程序将其插入到另一个项目中：

未捕获类型错误：在不存在的对象上调用“querySelector” 实现接口元素。 findOne 选择器-engine.js:24 _showElement modal.js:217 显示 modal.js:143 和index.js:251 显示background.js:54 和index.js:251 r index.js:273 选择器引擎.js:24:43

Answer 1

您的控制台中一定出现了一些独特的按键错误。
为您的卡提供一个密钥，它充当您的卡的唯一id。

<....
   {modalInfo.map((info, index) => (
     <div className="card" key={info.index}>  
...>

您可以提供index以及unique id，但这不是仅用于测试的正确方法。但据我所知，number 属性也增加了 1，所以这就是我将 index 保留为 key 的原因。

Answer 2

id 属性在文档中必须是唯一的。您在每个 map 迭代中重复使用 staticBackdrop，因此它们会被重复。

当 Bootstrap 尝试通过 #staticBackdrop 获取模态目标时，它只会获取第一个目标，因为重复 ID 会发生这种情况。

使用沙箱链接中的 info.id 属性，尝试将其合并到 id 和 data-bs-target 属性中

{modalInfo.map((info) => (
  <div className="card" key={info.id}> {/* keys are important, don't use index */}
    <h1>{info.name}</h1>
    <button
      type="button"
      className="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target={`#staticBackdrop_${info.id}`}
    >
      Show more
    </button>

    <div
      className="modal fade"
      id={`staticBackdrop_${info.id}`}
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabIndex="-1"
      aria-labelledby={`staticBackdropLabel_${info.id}`}
      aria-hidden="true"
    >
      {/* the rest of your markup goes here */}
    </div>
  </div>
))}

。 class 属性（应为 className）和重复的 id="staticBackdropLabel"（应获得与 staticBackdrop 类似的处理） >。