reactjs 待办事项完成状态未保存在React Native的存储中

z9smfwbn  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(141)

编辑-添加了最低可重现性示例: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。
我已经花了一天又一天的时间在这个问题上,不能弄清楚。任何方向将是有帮助的,谢谢!

t2a7ltrp

t2a7ltrp1#

我检查了你的code,发现你在不同的地方犯了一些错误。在Task.js中,你可以不使用checkBoxState。为此,将status作为props传递给Task,同时在FlatList中呈现它,如下所示:

<Task
  key={item.key}
  todoKey={item.key}
  title={item.title}
  status={item.status}
  editHandler={handleEdit}
  pressHandler={handleDelete}
/>

然后如下所示,更改按钮以切换status,这样您就可以使用来自props的内容,并创建一个名为toggleStatus的函数,然后将其传递给onPress

<TouchableOpacity onPress={toggleStatus}>
  <View
    style={[
      styles.circle,
      !props.status ? styles.completeCircle : styles.incompleteCircle,
    ]}
  ></View>
</TouchableOpacity>

代码为toggleStatus

const toggleStatus = () => {
  props.editHandler(props.todoKey, props.title, !props.status);
};

handleEdit将简化为:

const handleEdit = () => {
  props.editHandler(props.todoKey, text2, props.status);
  setEdit(false);
  console.log(props.status);
};

最后,在TasksMain.js中,为了避免用useState的初始数组替换存储中的内容,请确保saveTodoToUserDevicegetTodosFromUserDevice之后运行。为此,请在TasksMain.js中添加以下状态,并稍微更改两个函数,如下所示:
第一个

相关问题