.map() 迭代的值不会反映在 html 属性中的函数内部

Question

在Parent 组件中，传递[0, 1, 2, 3, 4, 5] 值，并为每个值创建一个Child 组件。所以Child 组件出现了 6 次。子组件是 bootstrap modal 如下

import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React from "../../node_modules/react";

function Child(props) {
  return (
    <>
      <h1 className="text-white">{props.monthpassed}</h1>
      <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Click to open below Modal
      </button>

      <div class="modal fade text-white" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content bg-dark">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Select project and add an allocation</h5>
              <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="mb-3">
                  <h1 className="text-white">{props.monthpassed}</h1>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>);
}

export default Child;

请注意，props.monthpassed 存在两个实例。一次在按钮上方，一次在单击该按钮时将显示的实际模式上。

Parent 组件如下。

import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React from "../../node_modules/react";
import Child from "./Child";

function Parent(props) {
  return [0, 1, 2, 3, 4, 5].map(xx => <Child monthpassed={xx}></Child>);
}

export default Parent;

显示父组件时，如下图所示。

请注意，在每个按钮上方，传递的props.monthpassed 会根据Parent 组件中数组中的值正确显示。这非常有效。

但是，当我单击任何按钮时，模态框仅在模态框内显示一个值 0，而不是在父组件中显示的数组中的值。

我该如何处理这种差异？

Answer 1

你忘了写地图的回报。

months.map((month, month_idx) => {
    return (
        <ProjectSelectionModal
            key={month_idx}
            onSelectingProject={(project) => selectProjectHandler(month_idx)}>
        </ProjectSelectionModal>
    );
});