将单个 table 条目传递给反应中的另一个兄弟组件

Question

我有一个 table，其中包含各个国家/地区的数据（数据来自 API）。每个 table 条目都有一个编辑选项。此编辑所做的是将用户带到另一个组件，用户可以通过该组件编辑相应的字段数据。

我已经编辑 API 准备好进行编辑，但我想在编辑前显示数据。当然，我可以从编辑页面发出另一个 GET 请求。但如果可能的话，我想将每个数据（从 table）发送到编辑组件。这样就不需要另一个 GET 请求。我添加了 table 代码。

代码沙盒Link

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>

将单个 table 条目传递给反应中的另一个兄弟组件

Pass single table entry to another sibling component in react

reactjs

typescript

react-table

react-state-management