React中useState更新后页面未重新渲染问题求助

核心问题出在addNewTask函数里直接修改了原state数组，导致React无法检测到state变化，页面自然不会更新：

const addNewTask = (newTask) => {
    let task = {
        id: checkID(),
        name: newTask
    };
    const newTasks = myTasks; // 只是复制了原数组的引用，没有创建新数组
    newTasks.push(task); // 直接修改了原state数组
    setMyTasks(newTasks); // 传递的还是原数组引用，React判定state未变化
}

React的state更新依赖引用变化——如果只是修改原state对象/数组的内容，引用没改变，React不会触发组件重新渲染。

修复步骤 #

1. 正确创建新数组更新state #

把addNewTask改成下面这样，通过扩展运算符创建新数组，再添加新任务：

const addNewTask = (newTask) => {
    // 替代原checkID函数，一行代码生成新ID
    const newId = myTasks.length ? myTasks[myTasks.length - 1].id + 1 : 1;
    const task = {
        id: newId,
        name: newTask
    };
    // 创建包含原数组所有元素+新任务的新数组
    setMyTasks([...myTasks, task]);
}

原checkID函数可以直接删除，上面的代码已经实现了生成新ID的功能，更简洁高效。

2. 优化AddTask组件（可选但推荐） #

你现在用document.getElementById获取输入值，不符合React的最佳实践，改成用useState管理输入状态：

import './AddTask.css';
import addImg from "../img/plus.png";
import { useState } from 'react';

const AddTask = (props) => {
    const [inputValue, setInputValue] = useState('');

    const add = () => {
        if(inputValue.trim().length > 0){
            props.addTask(inputValue);
            setInputValue(''); // 添加后自动清空输入框
        }
    }

    return(
        <div className='add-task'>
            <input 
                type='text' 
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="输入新任务"
            />
            <button onClick={add}>
                <img src={addImg} alt='添加任务'/>
            </button>
        </div>
    )
}

export default AddTask;

这种写法避免了直接操作DOM，让组件状态完全由React控制，还能顺便实现添加任务后清空输入框的功能。

改后生效的原因 #

• [...myTasks, task]创建了全新的数组，保证state的引用发生变化，React能检测到变化并重新渲染组件，新任务就会显示在页面上。
• 用useState管理输入框状态，符合React的状态管理逻辑，避免了DOM操作可能带来的潜在问题。

内容的提问来源于stack exchange，提问作者Jan Michálek