ReactJS中map函数内无法向ModalDelete组件传递props该如何解决

• 1. 修正props传递的数据源
     你当前传递的NewState={this.props.empname}是取父组件传入ViewEmpList的顶层empname属性，而非map遍历中当前行的员工数据，正确写法应为传入当前遍历项的empname字段：

<ModalDelete NewState={emps.empname}/>

• 2. 解决模态框ID重复冲突
     你所有循环生成的ModalDelete组件都使用了同一个id staticBackdrop，会导致Bootstrap模态框触发时永远匹配第一个符合ID的元素，无法对应到当前行的模态框。需要给每个模态框绑定唯一ID，建议使用当前行的员工id作为标识：
     修改ViewEmpList中调用ModalDelete的代码，传入唯一标识参数：

<ModalDelete NewState={emps.empname} empId={emps.empid}/>

同步修改ModalDelete.js代码，将模态框的id和对应触发按钮的data-bs-target改为动态值：

// 函数组件写法示例，如果是类组件请保持class声明，props调用改为this.props
const ModalDelete = (props) => {
  const modalId = `deleteModal_${props.empId}`
  return (
    <>
      {/* 模态框触发按钮，你之前注释的删除图标可以放在这里 */}
      <button type="button" data-bs-toggle="modal" data-bs-target={`#${modalId}`} style={{border: 'none', background: 'transparent'}}>
        <RiDeleteBin2Fill className="fontcolor" style={{ fontSize: 35 }} />
      </button>
      <div className="modal fade col-md-12 col-sm-12" id={modalId}>
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title btn-title" id={`${modalId}Label`}>Are You sure want to delete it?</h5>
              <TiDeleteOutline style={{color:"#fff",fontSize:"18px"}} type="button" data-bs-dismiss="modal"/>
            </div>
            <div className="modal-body">
              {props.NewState} 
            </div>
            <div className="modal-footer">
              <button type="button" className="btn-delet" data-bs-dismiss="modal">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

• 3. 确认组件声明方式匹配props调用规则
     如果ModalDelete是函数组件，不存在this对象，直接通过组件入参props取值即可，原代码中的this.props.NewState会报错导致无法渲染值；如果是类组件请确认已经正确继承React.Component，没有拼写错误。

内容的提问来源于stack exchange，提问作者santhosh sandy88