将单个表条目传递给react中的另一个兄弟组件

Question

我希望大家都过得不错。这是我问题的完整方案。我有一个包含各种国家/地区数据的表（数据来自API）。每个表条目都有一个编辑选项。此编辑所做的是将用户带到另一个组件，用户可以通过该组件编辑相应的字段数据。

我已经准备好用于编辑目的的编辑API，但是我想在编辑之前显示数据。当然，我可以从编辑页面发出另一个GET请求。但是，如果可能的话，我想将每个数据（来自表）发送到编辑组件。这样就不需要另一个GET请求。我添加了表代码。如果您需要任何其他信息，请在评论中让我知道。

CodeSandbox链接

https://pitqx.csb.app/list

  <table className="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <td><p className="paragraph">Country</p></td>
                                <td><p className="paragraph">State</p></td>
                                <td><p className="paragraph">City</p></td>
                                <td><p className="paragraph">Area</p></td>
                                <td><p className="paragraph">Postal Code</p></td>
                                <td> <p className="paragraph">Delete</p></td>
                                <td> <p className="paragraph">Action</p></td>
                            </tr>
                        </thead>
                        <tbody>

                        {
                            countries ?
                    countries.map((country,index) =>(
                        <tr key={index} data-id={country._id} >

                        <td>
                            <h3 className="paragraph">{country.country}</h3>
                        </td>
                        <td>
                            <h3 className="paragraph" style={marginBottom}>{country.state}</h3>

                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{country.city}</p>
                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{country.area}</p>
                        </td>

                         <td>
                         <p className="paragraph" style={marginBottom}>{country.postal_code}</p>
                         </td>
                          <td>
                         <i className="fa fa-trash" ></i>
                         </td>
                         <td className="relative">
                             <Link to={"/dashboard/setting/country-and-city-setting/edit/"+country._id}>
                                 <button type="button" className="golden-button-sm">Edit</button>
                             </Link>


                        </td>
                         </tr>

                    )) : null
                }

                        </tbody>
                    </table>

Answer 1

这是我找到的解决方案。我们可以使用Link属性本身传递状态数据。

<td className="relative">
 <Link 
      to={{
         pathname:"/dashboard/setting/country-and-city-setting/edit/",
         state:country
         }}
  >
  <button type="button" className="golden-button-sm">Edit</button>
  </Link>

  </td>