React父组件更新props后子组件ListItem未触发重渲染问题求助

核心问题是违反了React状态的不可变更新原则：React对于数组、对象这类引用类型的状态，会通过引用地址判断是否发生变更，你直接修改原数组元素而不生成新数组的话，React会认为状态没有变化，因此不会触发组件重渲染，子组件自然收不到更新后的props。

你代码里有两处违反不可变原则的写法：

1. nextTask函数中的错误写法 #

const new_arr = statuses; // 直接赋值原数组的引用，和state指向同一个数组
// @ts-ignore
new_arr[pointer] = "inProgress"; // 直接修改原数组的元素
setStatuses(new_arr); // 传入的还是原数组的引用，React判定状态无变化

2. updateStatus函数中的错误写法 #

// @ts-ignore
const updateStatus = (index:number, status:string) => setStatuses(prev => prev[index] = status);
// 直接修改prev数组的元素，且返回的是修改后的元素而非新数组，完全不符合更新规范

1. 修复nextTask函数 #

创建新数组再修改后提交：

const nextTask = () => {
    switch(statuses[pointer]){
        case "queued":
            // 用展开运算符生成全新的数组
            const new_arr = [...statuses];
            new_arr[pointer] = "inProgress";
            setStatuses(new_arr);    
            break;
        case "inProgress":
            break;
        case "completed":
            setPointer(prev => prev+1);
            break;
        default:
            console.log(`error: unknown value ${statuses[pointer]}`);
    }
}

2. 修复updateStatus函数 #

同样基于原状态生成新数组再返回：

const updateStatus = (index:number, status:string) => setStatuses(prev => {
    const newArr = [...prev];
    newArr[index] = status;
    return newArr;
});

修复后只要statuses数组内容变更，就会生成新的引用触发父组件重渲染，子组件拿到新的status props后就会正常更新图标、触发对应的useEffect监听逻辑。

内容的提问来源于stack exchange，提问作者ADSmith-0