如何让useState的初始值随父组件props更新而重置？

问题原因 #

你说得没错，useState的初始值仅在组件首次挂载时生效，后续父组件触发重渲染时，子组件会复用现有state，不会重新执行初始赋值逻辑。所以当Dlist里的arr更新后，Slist的st还是保持第一次挂载时的初始值。

两种解决方法 #

方法1：用useEffect监听props变化更新state #

在Slist组件中添加useEffect，监听props.arr的变化，一旦arr更新就重置st：

import { useState, useEffect } from 'react';

const Slist = (props) => {
    let [st, updateSt] = useState([props.arr[0], props.arr[1]]);
    
    // 监听arr变化，重置st
    useEffect(() => {
        updateSt([props.arr[0], props.arr[1]]);
    }, [props.arr]); // 依赖数组：当arr变化时执行
    
    console.log(st);
    // ...其他逻辑
}

这种方式是在现有组件实例内更新state，适合只需要重置特定state的场景。注意：如果arr是引用类型（比如数组），确保父组件更新arr时是创建新数组（比如setArr([5,6,7,8])而不是修改原数组），否则依赖数组不会触发更新。

方法2：通过key属性强制组件重新挂载 #

在父组件Dlist中给Slist添加key属性，让key随arr变化而变化。React会认为key不同的是全新组件，从而销毁旧组件、重新挂载新组件，自然会重新初始化st：

// Dlist.js
let arr = [1,2,3,4]
...
// 更新arr后
<Slist arr={arr} key={arr.join(',')} />
// 或者用JSON.stringify(arr)当key，适合复杂数组
// <Slist arr={arr} key={JSON.stringify(arr)} />

这种方式相当于完全重置组件的所有内部状态，适合组件内有多个state需要随props变化重置的场景，代码更简洁。

内容的提问来源于stack exchange，提问作者mr.loop