编辑-添加了最低可重现性示例:https://snack.expo.dev/@hdorra/code
我希望每个人都能访问这个零食。所以如果你添加了一个任务,你可以看到它出现在日志中。点击圆圈,它显示为true(意味着它被点击了)。保存并刷新,所有的东西都被存储(任务),但复选框没有。我剥离了代码,使其尽可能最小,但它显示了问题。
我已经在这个错误上呆了几天了。我对stackoverflow比较陌生,所以如果我的问题不清楚或者我没有以正确的格式问它,我很抱歉。我正在尝试在react native中创建一个使用异步存储的待办事项应用程序。我创建了一个切换按钮来保存切换到一个状态。这个按钮位于一个组件中:
const [checkBoxState, setCheckBoxState] = React.useState(false);
const toggleComplete = () => {
setCheckBoxState(!checkBoxState)
handleEdit();
console.log(checkBoxState)
}
当用户检查它时-似乎在控制台中正确地显示为标记true和false。然后,将其传递给编辑处理程序以更新数组,控制台再次显示它是正确的状态:
const handleEdit = () => {
props.editHandler(props.todoKey, text, checkBoxState);
console.log(text2, checkBoxState)
};
然后它显示它已正确保存:
const [todos, setTodos] = React.useState([]);
const handleEdit = (todoKey, text, newStatus) => {
const newTodos = [...todos];
const index = newTodos.findIndex(todos => todos.key === todoKey);
newTodos[index] = Object.assign(newTodos[index], {title: text, status: newStatus});
setTodos(newTodos);
console.log(todos, newStatus)
};
异步功能保存到设备并加载如下:若要保存:
const saveTodoToUserDevice = async (todos) => {
try {
const stringifyTodos = JSON.stringify(todos);
await AsyncStorage.setItem('todos', stringifyTodos);
} catch (error) {
console.log(error);
}
};
要从设备加载:
const getTodosFromUserDevice = async () => {
try {
const todos = await AsyncStorage.getItem('todos');
if (todos != null) {
setTodos(JSON.parse(todos));
console.log("loaded successfully");
}
} catch (error) {
console.log(error);
}
};
问题就在这里-我得到的控制台日志显示它已正确保存并加载。但是,当我刷新时,复选框状态根本没有保存,只有标题文本(所以它正在保存,但复选框将始终为false(初始状态设置))。如果我单击true,它将显示为true,然后当我刷新时,它又回到false。
我已经花了一天又一天的时间在这个问题上,不能弄清楚。任何方向将是有帮助的,谢谢!
1条答案
按热度按时间t2a7ltrp1#
我检查了你的code,发现你在不同的地方犯了一些错误。在
Task.js
中,你可以不使用checkBoxState
。为此,将status
作为props
传递给Task
,同时在FlatList
中呈现它,如下所示:然后如下所示,更改按钮以切换
status
,这样您就可以使用来自props
的内容,并创建一个名为toggleStatus
的函数,然后将其传递给onPress
:代码为
toggleStatus
:handleEdit
将简化为:最后,在
TasksMain.js
中,为了避免用useState
的初始数组替换存储中的内容,请确保saveTodoToUserDevice
在getTodosFromUserDevice
之后运行。为此,请在TasksMain.js
中添加以下状态,并稍微更改两个函数,如下所示:第一个