如何解决在 React Native 中使用 reducer 更新屏幕
我试图在任务中添加一张图片,然后更新平面列表以查看更新但它没有。如果我关闭并返回应用程序,它会起作用。 如果我显示商店,我也会看到即时更新,但不会出现在我的屏幕上。
这是我的代码的一部分:
TaskImage.js
openImageLibrary=async(task)=>{
const result = await ImageHelpers.openImageLibrary();
if(result){
const downloadUrl=await this.uploadImage(result,task)
this.props.UpdateTaskImage({...task,uri:downloadUrl})
}
}
....
const mapStateToProps=state=>{
return{
tasks:state.tasks
};
}
const mapDispatchToProps=dispatch=>{
return{
loadTasks:tasks=> dispatch({type:'LOAD_TASKS_FROM_SERVER',payload:tasks}),addTask:task=>dispatch({type:'ADD_TASK',payload:task}),DeleteTask: task=>dispatch({type:'DELETE_TASK',UpdateTaskImage:task=>dispatch({type:'UPDATE_TASK_IMAGE',payload:task})
}
}
TasksReducer.js :
const initialState={
tasks:[],image:null
}
const tasks=(state=initialState,action)=>{
switch(action.type)
{
case 'LOAD_TASKS_FROM_SERVER':
return{
...state,tasks:action.payload
};
case 'UPDATE_TASK_IMAGE':
return{
...state,tasks:state.tasks.map(task=>{
if(task.task==action.payload.task)
{
return {...task,image:action.payload.uri}
}
return task
})
}
default:
return state;
}
};
export default tasks;
有什么想法...?
解决方法
查看更多代码会有所帮助,但这就是我认为我所看到的。 redux 更新后,Flatlist 项如何更新?我认为您的问题可能是 Flatlist 道具也没有映射到 redux 状态或直接从该组件的 tasks
道具传递下来。当它的 data
属性发生变化时,Flatlist 将重新呈现,因此请确保是这种情况。
除此之外,请确保在任何情况下都正确使用 redux。我认为您可能错过了对 connect
函数的调用。请参阅使用此示例的 redux official doc:
// TodoList.js
function mapStateToProps(state) {
const { todos } = state
return { todoList: todos.allIds }
}
export default connect(mapStateToProps)(TodoList)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。