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

【问题标题】：Map function not rendering data in List item despite having data尽管有数据，但地图功能未在列表项中呈现数据
【发布时间】：2021-02-06 17:53:18
【问题描述】：

我正在通过 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);
    }

【问题讨论】：

标签： reactjs map-function mapstatetoprops

【解决方案1】：

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

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

【讨论】：

我看不出有什么不同。语法上是正确的。

【解决方案2】：

找到了确切的问题。我在这里获取的工具列表来自 GET api 调用，在第一个渲染周期中最初是空的。因此，当实际获取数据时，ListItem 已经呈现。所以我使用 useEffect 来监控 toolsListData，然后通过 setToolsList(toolsList); '设置'它;

useEffect(() => {
        if (toolsListData && toolsListData.length > 0)
            setToolsList(toolsListData);
    }, [toolsListData])

只要 toolsListData 发生变化，它就会立即反映出来，使其看起来像是在第一个渲染周期中渲染的。

【讨论】：