reactjs useState空数组

bq3bfh9z  于 2023-04-11  发布在  React
关注(0)|答案(2)|浏览(181)

我在react js中遇到了一个问题。我创建了useState的空数组,如下代码:

const [fileUploadName, setUploadFileName] = useState([])

我想把我的文件atteched的名字推到这个数组中,这是我的代码:

const InputFileHandler = event => {
file = event.target.files[0];
setUploadFileName(oldNames => [...oldNames, file.name])
const AllfileNames= fileUploadName 
}

当我第一次将数据推入数组时,AllfileNames是'[]',但当我第二次推入数据时,AllfileNames是第一个附加名称的名称,例如:

firstAttachName = 'download.jpg';
secondAttachName = 'download1.jpg';

在第一次推送中,AllfileNames给予了我以下数据:[]
在第二次推送中,AllfileNames给予了我以下数据:['download.jpg']
这段代码有什么问题?

wmtdaxz3

wmtdaxz31#

React中的useState钩子是异步的,你需要使用useEffect和fileUploadName作为依赖,并在里面使用这个代码const AllfileNames= fileUploadName

7rfyedvj

7rfyedvj2#

在您的示例中,InputFileHandler是一个回调,它具有过时版本的set state函数。我的建议是创建一个useCallback,它接受事件,而不是从setState传播状态,可以尝试使用原始状态,因此传播状态并在末尾附加新状态。

相关问题