reactjs - 在输出中看不到值
问题描述
我一直试图弄清楚为什么这在输出中不可见,很可能与反应的异步性质有关,这很好。但是需要做什么才能显示内容呢?
描述栏是空白的!
https://codesandbox.io/embed/vibrant-field-700k2?fontsize=14&hidenavigation=1&theme=dark
有一个带有主数据的用户表:
{usrData.map((prop, key) => {
return (
<tr key={key}>
<td className="text-center">{prop.id}</td>
{/* Returns Data */}
<td className="text-left">
{
selectTimeOptions.filter(
dealer => dealer.value === prop.time_slot
)[0].label
}
</td>
{/* To double check data is present */}
<td>{prop.customergarage}</td>
<td>
{/* Does not return or show data */}
{/* But data visible in console */}
{[...prop.customergarage].forEach(d => {
if (parseInt(d, 10) > 0) {
const retrs = sTypes.filter(st => st.value === d)[0];
console.log(retrs);
return retrs;
}
})}
</td>
<td className="text-right" />
</tr>
);
})}
任何解释和/或修复?特别是如何在这里使用 React.useEffect() ?
解决方案
我不知道你想在这里用 useEffect 做什么,但我会尝试解释为什么它不渲染。
首先, forEach 不能那样工作,所以你不能从它返回。
其次,您可以使用构建内部部件的功能解决所有问题。
buildCustomerData = (customergarage) => {
const good = [];
customergarage.forEach(d => {
if (parseInt(d, 10) > 0) {
const retrs = sTypes.filter(st => st.value === d)[0];
console.log(retrs);
good.push(retrs)
}
})
return good;
}
{usrData.map((prop, key) => {
return (
<tr key={key}>
<td className="text-center">{prop.id}</td>
{/* Returns Data */}
<td className="text-left">
{
selectTimeOptions.filter(
dealer => dealer.value === prop.time_slot
)[0].label
}
</td>
{/* To double check data is present */}
<td>{prop.customergarage}</td>
<td>
{/* Does not return or show data */}
{/* But data visible in console */}
{buildCustomerData(prop.customergarage)}
</td>
<td className="text-right" />
</tr>
);
})}
只是一张地图不会在内部循环中完成工作,因为您将遇到无法满足您的条件的情况。
推荐阅读
- bash - 如何同时重命名和覆盖 Bash 中的部分文件名?
- amazon-web-services - Logrotate Postrotate aws s3 通配符
- javascript - 如何使用 javascript 突出显示管理侧边栏菜单的树视图部分?
- html - 如何在 Markdown 代码块中以在转换为 HTML 时正确呈现的方式使用美元符号 ($)?
- python - Python将map与groupby和transform结合起来
- go - Golang - 使用 PuerkitoBio/goquery 分别为每个子元素查找文本
- java - 如何在 java11 中获取 TotalSafePointTime
- android - 在自定义适配器中隐藏软键盘
- python - 创建批处理并将功能应用于python列表的内存高效且最快的方法
- sql - plsql中的函数