反应将所有值作为道具而不是选定值传递

Question

我正在尝试制作一个用于编辑用户 activity 的弹出模式，并且我尝试使用道具传递当前的 Activity ID。但是，它传递了用户当前拥有的 Activity ID 的所有值。例如，如果用户在 activityList 中有两个 ID 为 1 和 2 的活动，当我单击 2 时，传递的道具将同时为 1 和 2。但是，我只想传递 2。

{activityList.map((val, key) => {
                                return(
                                    <div key = {key}>
                                    
                                    <Row>
                                        <Col>
                                            {val.project_activity_title}
                                        </Col>
                                        <Col>
                                            {val.project_activity_information}
                                        </Col>
                                        <Col><Button variant="link" className = "btn btn-link mr-3"
                                             onClick=
                                             { () => setEdActivity(true)
                                            }
                                             >Edit</Button>
                                             <EditActivity
                                                activityID={val.project_activity_id} //pass activity ID here
                                                itemID={projectCode}
                                                show={edActivity}
                                                
                                                onHide={() => setEdActivity(false)}
                                            />
              
                                        </Col>
                                  

                                    </Row>
                                    
                                    </div>
                                )
})}

有人知道我做错了什么吗？谢谢！

Answer 1

继续我之前的评论，

Need more code here or some working example to answer accurately but this is my best guess. I think you are using EditActivity component is a modal window.

Which has hide/show mechanism with edActivity attribute/state for all instances in the loop.

That results in visibility of multiple modals.

Hence you're seeing multiple IDs.

这里有一个可能的解决方案，可以在这里提供帮助。您需要设置要显示模态的个人 ID，对于 show/hide 标志，您可以将 project_activity_id 的值与 edActivity 状态进行比较。

{activityList.map((val, key) => (
    <div key = {key}>
      <Row>
        <Col>
          {val.project_activity_title}
        </Col>
        <Col>
          {val.project_activity_information}
        </Col>
        <Col><Button variant="link" className = "btn btn-link mr-3"
          onClick={() => setEdActivity(val.project_activity_id)} // Updated setter
        >Edit</Button>
        <EditActivity
          activityID={val.project_activity_id} //pass activity ID here
          itemID={projectCode}
          show={edActivity === val.project_activity_id} // Updated Comparison
          onHide={() => setEdActivity(undefined)} // Updated setter
        />
        </Col>
      </Row>
    </div>
))}

反应将所有值作为道具而不是选定值传递

React passing all values as props instead of selected value

reactjs

react-props