React中setArray无法修改对应state，其余useState状态可正常更新如何解决？

问题根本原因 #

你遇到的setArray未生效的问题是多个细节错误共同导致的，具体如下：

• React的状态更新是异步批量执行的，调用setArray后当前作用域内的array还是本次渲染的旧值，不会立刻变更，直接打印/读取拿到的还是旧值，会造成“未更新”的错觉
• 你设置了if(array.length === 0)的分支判断，只有数组为空时才会执行setArray逻辑，第二次及以后提交不会进入该分支，自然不会触发数组更新
• 注释的useEffect存在变量名拼写错误：依赖项写的是arr，但你实际声明的状态变量是array，导致该副作用永远不会触发，也没法通过这个逻辑验证数组更新
• 你在setArray之后立刻调用了同步的alert，会阻塞浏览器渲染流程，React的重渲染会被推迟到弹窗关闭后才执行，弹窗开启期间看不到状态更新的效果
• localStorage存储数组的方式错误：直接传数组给localStorage.setItem会被强制转为字符串"[object Array]"，丢失实际内容，必须先通过JSON.stringify转为JSON字符串

修复后的代码 #

import React from 'react';
import { Paper, Typography, TextField , Button, makeStyles} from '@material-ui/core';
import {useHistory, Link} from 'react-router-dom'
import {useEffect} from 'react';

// 补充你缺失的useStyle定义，可根据实际需求调整样式
const useStyle = makeStyles({
  formWrapper: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: '50px'
  },
  paper: {
    padding: '20px',
    width: '400px'
  },
  textfield: {
    margin: '8px 0'
  }
})

const Register = () =>{
  const classes = useStyle();
  const history = useHistory();
  const [name, setName] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [array, setArray] = React.useState([])

  // 修复变量名错误，监听array变化，更新后打印+存localStorage
  useEffect(()=>{
    console.log('array更新成功，最新值：', array)
    const jsonArray = JSON.stringify(array)
    localStorage.setItem('array',jsonArray)
  },[array])

  const submit = (event) =>{
    event.preventDefault();
    // 可根据业务需求调整判断逻辑，这里去掉了仅第一次生效的限制
    const obj = {};
    obj.id = Math.random();
    obj.name = name;
    obj.password = password;
    setName('');
    setPassword('')
    setArray([...array,obj])
    // 把alert放到setTimeout里，避免阻塞React状态更新
    setTimeout(() => {
      alert('You are registered'); 
    }, 0)
  }

  return(
    <div>
      {/* 加个测试展示区，直接渲染array内容验证更新 */}
      <div style={{textAlign: 'center', margin: '20px 0'}}>
        <Typography>当前array长度：{array.length}</Typography>
        {array.map(item => <div key={item.id}>用户名：{item.name}</div>)}
      </div>
      <div className = {classes.formWrapper}>
        <Paper elevation={3} className = {classes.paper} >
        <Typography variant="h5" style = {{ textAlign : 'center'}}>Register</Typography>
        <form noValidate autoComplete="off">
            <TextField id="username" className={classes.textfield} style={{width : '95%'}} value = {name} name = "username"  label="Username" onChange = {e=>setName(e.target.value)} />
            <br />
            <TextField id="password" className={classes.textfield} style={{width : '95%'}} value = {password} name = "password"  label="Password" onChange = {e=>setPassword(e.target.value)} />
            <br />
            <br />
            <Link to='/'>SignIn</Link>
            <Button variant="contained" color="secondary" style = {{width : '100%'}} onClick = {submit} >Register </Button>
        </form>
        </Paper>
      </div>
    </div>
  )
}

export default Register;

验证方式 #

修复后提交注册信息，可通过两个方式确认array已经正确更新：

1. 页面顶部的测试区会实时显示array的长度和已存储的用户名
2. 打开浏览器控制台可以看到array更新后的打印日志，同时localStorage里也会存储正确的JSON格式数组内容

内容的提问来源于stack exchange，提问作者Mohammad Faateh