状态(来自 useState)在回调中使用旧值 [英] state (from useState) using old value on a callback

问题描述

我有一个包含文件上传组件的表单，该组件在上传结束时调用 props.onFileAdded 回调.

I have a form with a file upload component that calls a props.onFileAdded callback when the upload ends.

axios.post(UPLOAD_URL, data, config)
        .then(function (res) {
            const {data} = res

            if (props.onFileAdded)
                props.onFileAdded(props.index, data)
        })
        .catch(function (err) {
            console.log(err)
        })

我的问题是我的 indexList 状态在执行该回调时被重置(onFileAdded 作为 onFileAdded 属性传递):

My issue is that my indexList state is reset when that callback is executed (onFileAdded is passed as the onFileAdded property):

const [indexList, setIndexList] = useState()
//... 
function addItem() {
    logger.debug("indexList was: ", ": ", indexList?.length, ":", indexList)
    const newIndexList = indexList == null ? [] : [...indexList]
    newIndexList.push(newIndexList.length)
    logger.debug("indexList became: ", newIndexList.length, ": ", newIndexList)
    setIndexList(newIndexList)
}

function onFileAdded(index, uploadedFile) {
    logger.debug("onFileAdded called")
    addItem()
}

为了仔细检查我的问题，我在父组件中添加了一个按钮

To double check my problem I added in the parent component a button

    <Button onClick={addItem}>Add Item</Button>

当我点击那个按钮时，我的状态会按预期更新，但是当我上传文件时它会重置:

And when I click that button, my state is updated as expected, but when I upload a file it is reset:

_app.js?ts=1625147479051:16572 indexList was:  :   : 
_app.js?ts=1625147479051:16572 indexList became:  1 :  0
_app.js?ts=1625147479051:16572 Rendering with index list:  0
_app.js?ts=1625147479051:16572 indexList was:  :  1 : 0
_app.js?ts=1625147479051:16572 indexList became:  2 :  0,1
_app.js?ts=1625147479051:16572 Rendering with index list:  0,1
_app.js?ts=1625147479051:16572 indexList was:  :  2 : 0,1
_app.js?ts=1625147479051:16572 indexList became:  3 :  0,1,2
_app.js?ts=1625147479051:16572 Rendering with index list:  0,1,2
_app.js?ts=1625147479051:16572 starting to upload
_app.js?ts=1625147479051:16572 file load finished
_app.js?ts=1625147479051:16572 onFileAdded called
_app.js?ts=1625147479051:16572 indexList was:  :   : 
_app.js?ts=1625147479051:16572 indexList became:  1 :  0
_app.js?ts=1625147479051:16572 Rendering with index list:  0

我在这里找到了答案，但我不知道该怎么做onChange 正在重置状态 - useState

I found an answer here, but I can't figure out what to do onChange is resetting state - useState

感谢您的帮助！

推荐答案

这可能是因为 addItem() 函数对您的 indexList

It is probably because the addItem() function has an old reference to your indexList

来自 react 文档:

如果新状态是使用之前的状态计算出来的，你可以传递一个函数给 setState.该函数将接收先前的值，并返回更新的值.

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

尝试将您的 addItem 函数更改为:

Try changing your addItem function to this:

function addItem() {
  setIndexList((oldIndexList) => {
    logger.debug("indexList was: ", ": ", oldIndexList?.length, ":", oldIndexList)
    const newIndexList = oldIndexList == null ? [] : [...indexList]
    newIndexList.push(newIndexList.length)
    logger.debug("indexList became: ", newIndexList.length, ": ", newIndexList)
    return newIndexList;
  })
}

这篇关于状态(来自 useState)在回调中使用旧值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！