無法將 object 添加到現有陣列（useState react native）

Question

我有在點擊事件上運行的addText()

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

useEffect(() => {
    getObjectItem("task")
        .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("task", list);
        setValue("")
    } else {
        alert("Please type in something!")
    }
}

來自console.log(list)的 Output ：

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

getObjectItem("任務") function:

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
    }
  }
}

為什么我不能在addText() function 中使用setList()向現有list數組添加值？

Answer 1

試着放

.then(t => setList([t.item]))

而不是你寫的

Answer 2

設置 state 是異步的。

在addText你寫：

setObjectItem("task", list)

這會將AsyncStorage中的值設置為任何list ，而不是在 state 更新后的值。 最簡單的解決方案是創建新數組，然后將其設置為 state和AsyncStorage 。