Javascript 使用React Redux筛选处于全局状态的数组和返回对象

我用React创建了一个简单的示例。现在我想在单击ToDo元素时显示弹出窗口

我在全局状态下存储了待办事项

var initialState = {
      toDoList:[
        {id:1,title:"ToDo-1",description:"Desp-1",Date:"2020-02-12 00:00:01",bg:"primary",active:true,},
        {id:2,title:"ToDo-2",description:"Desp-2",Date:"2020-02-13 00:00:01",bg:"light",active:false,}
      ],
      editingItem:{},
}

export function app(state = initialState, action) {
  switch (action.type) { 
    case "GET_ITEM":
      console.log("id -> " + action.id);
      const filteredData=state.toDoList.filter((item)=>item.id===action.id);
      return Object.assign({},state,{editingItem:filteredData})  
    default:
      return state
  }
}

在main.js文件中

export default function ToDo(props) {
   const app = useSelector(state => state.app);
   const dispatch = useDispatch();

    function ItemClicked(key,e){
      dispatch({ type: "GET_ITEM", id: key });
      console.log(app.editingItem);  
    }

    function CreateList(){
     return app.toDoList.map((item) => (
            <Card key={item.id} onClick={(e)=>(ItemClicked(item.id,e))}>
                <Card.Body>
                   {item.title}
                </Card.Body>
            </Card>
     ))
    }

   return (
     {CreateList()}
    )
}

导出默认函数ToDo（道具）{
const-app=useSelector（state=>state.app）；
const dispatch=usedpatch（）；
单击功能项（键，e）{
分派（{type:“GET_ITEM”，id:key}）；
console.log（app.editingItem）；
}
函数CreateList（）{
返回app.toDoList.map（（项目）=>(
（ItemClicked（item.id，e））}>
{item.title}
))
}
返回(
{CreateList（）}
)
}

当我单击以执行如下元素控制台输出时

id->1
{}
id->2
{id:1，标题：“ToDo-1”，描述：“Desp-1”，日期：“2020-02-12 00:00:01“，背景：“主要”，活动：真，}，
id->2
{id:2，标题：“ToDo-2”，描述：“Desp-2”，日期：“2020-02-13 00:00:01”，背景：“光”，活动：假，}

---

滤波输出总是有延迟。我看到上一项了。有什么问题？我应该使用回调进行调度吗？如果是，我如何使用回调？

调度更新存储的状态，但它只反映在下一个渲染阶段。因此，您登录的时间太短，还无法看到更改。虽然不是关于Redux本身，但它可以帮助您了解如何使用

useDispatch

和

useSelector

。一个主要区别是

dispatch

函数上没有

callback

参数，因为它不打算这样使用。应仅在渲染函数中处理当前状态。