redux 如何在react中显示特定项目？

bhmjp9jg 于 2023-01-21 发布在 React

关注(0)|答案(2)|浏览(79)

我正在创建一个页面来显示我从redux获得的所有任务。这是我获得任务的方式

const tasks = useSelector((state)=>state.tasks);

我还提供了搜索输入，这样用户就可以输入一个值并获取名称中包含该值的所有任务

const [search,setSearch] = useState('');

<input onChange={(e)=> {setSearch(e.target.value)} }></input>

我创建了一个函数，它根据搜索值返回任务列表

const getTasksWithSearch = () => {
var myTasks = [];
tasks.forEach((t) => {
if(t.name.search(search) !== -1){
myTasks.push(t); 
}
})
return myTasks ;
}

现在的问题是我不知道如何显示它.这是我如何处理任务的

tasks.map((t,index) => (
<div key={index}>my code</div>
))

我想用这个函数的返回怎么样？

redux

来源：https://stackoverflow.com/questions/75151874/how-to-display-specific-items-in-react

2条答案

按热度按时间

ergxz8rk1#

你可以创建一个useState钩子来存储你的任务。

const [searchTasks,setSearchTasks] = useState('');

然后利用useEffect在每次search的值更新时更新searchTasks。

useEffect(()=>{
if(search === '') {
setSearchTasks(tasks)
}else{
setSearchTasks(getTasksWithSearch(tasks));
}
},[search])

最后，在jsx中，您显示searchTasks而不是tasks

if(searchTasks === ''){
return <div>Loading..<div/>
}else{
return(
<>
...
searchTasks.map((task)=>(
<div key={index}>...</div>
))
</>
)
}

赞(0）回复(0）举报 2023-01-21

4ioopgfo2#

在UI中，它将如下所示：

{tasks.map((t,index) => (
<div key={index}>{t.name}</div>
))}

赞(0）回复(0）举报 2023-01-21

我来回答

redux 如何在react中显示特定项目？

2条答案

相关问题

热门标签

最新问答