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

问题描述

我正在通过 mapStatetoProp 接收工具数据列表。我还关注了其他类似的问题，这些问题仅通过在 map 函数中添加返回的一种解决方案来解决问题，但仍然不起作用。在日志中检查数据是否存在，甚至使用三元运算符来评估数据是否实际存在，但它仍然没有显示 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);
    }

解决方法

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

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

,

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

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

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