0

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

2 回答 2

1

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

 toolsList ?
    toolsList.map((tool,index)=>{
     return (
       <ListItem key={index}>
            <ListItemText primary={tool.name} />
       </ListItem>
     )})
    :<p>No Tools</p>
于 2021-02-06T18:07:36.690 回答
0

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

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

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

于 2021-02-07T02:40:36.333 回答