0

我正在创建一个表格,我将在其中显示不同的产品,并且我需要选择编辑每个产品。所有这些产品都存储在 redux 存储中,所以我想要做的是按下编辑按钮以在活动存储中显示事件。(我附上一张图片,以便您更好地了解我希望在哪里展示活动)。但我不知道如何捕获数据。

如您所见,当我按下编辑按钮时,我需要的是活动字段显示对象 0 的数据,但我不知道如何捕获数据。

表和 redux 存储

我渲染表格的文件

   <div className="mt-5">
        
    <h1>Listado de productos</h1>
    <hr/>

    <input 
        type="text"
        className="mb-2 form-control"
        placeholder="Buscar producto"
    />

    <hr />

    <button 
        className="btn btn-primary"
    >
        Anteriores
    </button>
    &nbsp;
    <button 
        className="btn btn-primary"
    >
        Siguientes
    </button>

    <button
        className="btn btn-outline-success float-end"
        onClick={ handleAgregar }
    >
        Agregar
    </button>

    <hr/>

    <table className="table table-dark table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th style={{ width: 100 }}>ID</th>
                <th style={{ width: 150 }}>Nombre</th>
                <th style={{ width: 150 }}>Precio</th>
                <th style={{ width: 150 }}>Stock</th>
                <th style={{ width: 150 }}>Proveedor</th>
                <th style={{ width: 150 }}>Acciones</th>
            </tr>
        </thead>
        <tbody>
            {body && body.map( b =>   
                <tr key={b.id}>
                    <td>{b.id}</td>
                    <td>{b.nombre}</td>
                    <td>{b.precio}</td>
                    <td>{b.stock}</td>
                    <td>{b.proveedor.nombre}</td>
                    <td>
                        <button className="btn btn-info btn-sm">Editar</button>
                        &nbsp;
                        <button className="btn btn-danger btn-sm">Eliminar</button>
                    </td>
                </tr>
            )}
        </tbody>
    </table>

我使用 useSelector 从商店获取数据

const { body } = useSelector( state => state.coffe );
4

0 回答 0