时间戳

首页 > 解决方案 > 尽管有数据，但地图功能未在列表项中呈现数据

reactjs - 尽管有数据，但地图功能未在列表项中呈现数据

问题描述

我正在通过 mapStateToProp 接收工具数据列表。我还关注了其他类似的问题，这些问题仅通过一种在 map 函数中添加 return 的解决方案来解决，但它仍然不起作用。在日志中检查数据是否存在，甚至使用三元运算符来评估数据是否实际存在，但它仍然没有显示 else（':' 之后的代码）部分

const DemoTools=({toolsListData})=>{

const [toolsList, setToolsList] = useState(toolsListData);

return (
<List>
{
  toolsList ?
    toolsList.map((tool,index)=>{
     return (
       <ListItem key={index}>
            <ListItemText primary={tool.name} />
       </ListItem>
    :<p>No Tools</p> //It never reaches here though
  )})
}
</List>
);
}

在此处输入图像描述 您在此图像中看到数据的原因是，我有一个搜索栏来搜索工具，只要我输入文本来搜索工具，甚至清除搜索框，整个列表就会可见。

const handleSearch = (value) => {
        let matchvalue = toolsListData.length > 0 ? toolsListData.filter(tool => tool.name.toLowerCase().includes(value.toLowerCase())) : [];
        setToolsList(matchvalue);
    }

标签： reactjsmap-functionmapstatetoprops

解决方案

您的逻辑在语法上不正确（奇怪的短语）。这是适合您的方式：-

 toolsList ?
    toolsList.map((tool,index)=>{
     return (
       <ListItem key={index}>
            <ListItemText primary={tool.name} />
       </ListItem>
     )})
    :<p>No Tools</p>

推荐阅读