React Native中useState无法向已有数组添加对象的问题

我有一个点击事件触发的addText()函数，相关代码如下：

const [list, setList] = useState([])
const [value, setValue] = useState("")

useEffect(() => {
    getObjectItem("tasks")
        .then(t => setList(t.item))
        .catch(e => { console.log(e) })
}), []
// A function that add data to the list array

function addText(text) {
    console.log(list);
    if (value !== "") {
        setList(prev =>
            [...prev,
            { text: text, isSelected: false }] // Adding a JS Object

        )
        setObjectItem("tasks", list);
        setValue("")
    } else {
        alert("Please type in something!")
    }
}

console.log(list)的输出结果为：

Array [
    Object {
        "isSelected": true,
        "text": "Test",
    }
]

getObjectItem("tasks")函数的实现代码如下：

const getObjectItem = async (name) => {
  try {
    const jsonItem = await AsyncStorage.getItem(name)
    const item = JSON.parse(jsonItem)
    return {
      status: 'success',
      name: name,
      item: item
    }
  } catch (err) {
    return {
      status: 'error',
      name: name,
      error: err
    }
  }
}

问题原因 #

1. useEffect语法错误：你写的useEffect结尾括号位置错误，应该是}, [])而非}), []，这个语法错误会导致组件初始化逻辑执行异常，影响list状态的初始加载。
2. useState异步特性导致旧值误用：setList是异步更新状态的，调用setList后立刻访问list拿到的还是更新前的旧值，所以setObjectItem("tasks", list)保存的是旧数组，不是添加新元素后的最新数组。
3. 状态更新与持久化不同步：你在调用setList后直接同步执行持久化操作，但此时状态还未完成更新，导致持久化的内容不是最新的。

修复方案 #

1. 修复useEffect语法错误

将useEffect的结尾修正为正确格式：

useEffect(() => {
    getObjectItem("tasks")
        .then(t => setList(t.item))
        .catch(e => { console.log(e) })
}, []);

2. 监听list变化自动持久化

使用useEffect监听list的变化，当list更新时自动保存到AsyncStorage，确保持久化的是最新数组：

// 新增useEffect监听list变化，自动执行持久化
useEffect(() => {
    if (list.length > 0) { // 避免初始空数组重复保存
        setObjectItem("tasks", list);
    }
}, [list]);

function addText(text) {
    if (value !== "") {
        setList(prev => [...prev, { text: text, isSelected: false }]);
        setValue("");
    } else {
        alert("Please type in something!");
    }
}

3. （可选）在setList回调中直接使用最新值

如果不想额外添加useEffect，可以在setList的更新函数中获取最新数组，再调用持久化方法（注意setObjectItem是异步函数，建议用async/await）：

async function addText(text) {
    if (value !== "") {
        await setList(prev => {
            const newList = [...prev, { text: text, isSelected: false }];
            setObjectItem("tasks", newList);
            return newList;
        });
        setValue("");
    } else {
        alert("Please type in something!");
    }
}

内容的提问来源于stack exchange，提问作者Filip Huhta