arrays - 将数组从 redux 存储导入到表中。反应,js
问题描述
我正在尝试从 redux 存储导入数据并在表中呈现。
我尝试了很多次,但总是收到此错误:对象作为反应子项无效(找到:带有键 {} 的对象)。如果您打算渲染一组孩子,请改用数组。
我想我应该使用 .map 方法,但我不知道何时使用 useSelector 获取数据
这是我的 redux 商店
我要呈现数据的表
<table className="table">
<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>
</tr>
</thead>
<tbody>
{
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
}
</tbody>
</table>
我使用 useSelector 从商店获取数据
const { body } = useSelector( state => state.coffe );
但是现在我该如何渲染数据?
或者我做错了什么?
有人可以帮我弄清楚吗?谢谢你的时间!!
解决方案
首先检查主体正在返回数据。如果是,请使用此代码
const Table = () => {
const { body } = useSelector( state => state.coffe );
return (
<table className="table">
<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>
</tr>
</thead>
<tbody>
{body && body.map( b =>
<tr key={b.id}>
<td>{b.nombre}</td>
<td>{b.precio}</td>
<td>{b.stock}</td>
</tr>
)}
</tbody>
</table>
)
}
导出默认表;
要呈现数据,您需要使用 map 函数。
推荐阅读
- sql - 存在 3 分钟后从 db 中删除一行。SQL
- android - 为什么 Recycler View 提供比 List View 更好的体验?
- sql-server - 当它更改为下一行中的其他标志时,获取同一标志的唯一行号?
- windows - 解码原始 NFC 有效负载
- r - R函数对数据进行分组并在另一列中按时间间隔汇总
- spring-boot - 未找到 Spring 应用程序生命周期 JMX bean(fork 为空)。需要杀死PID
- github - 有没有办法像 Gitlab 一样为 Github 添加截止日期
- javascript - 在 UIManager 中找不到“RNCSafeAreaView”
- c# - 如何循环通过 BsonArray 转换为 double 类型列表?
- android - Android 符号链接到隐藏或单独的位置或分区