React中useState操作数组后接收prop的类子组件未重新渲染求助

问题根因 #

父组件的setUsers写法是正确的，你已经通过展开运算符生成了新的数组引用，父组件状态更新是正常的。问题出在CardContainer类组件的设计上：
你将父组件传入的users prop复制到了子组件自身的state中，而constructor构造函数仅会在组件首次挂载时执行一次，后续父组件传入的users prop更新时，子组件自身的state.users不会同步更新，所以渲染内容一直是初始值。

解决方案 #

方案1（最推荐）：删除子组件冗余状态，直接使用props渲染

大部分场景下，不需要把props转存到子组件的state中，直接用props渲染即可，符合React单向数据流的设计，也没有多余的状态同步成本：

class CardContainer extends Component {
    render() {
        return (
            <div class="row row-cols-1 row-cols-md-2 g-4">
                {
                    this.props.users.map(user => {
                        return <Card id={user.phone} title={user.name} email={user.email} phone={user.phone}></Card>
                    })
                }
            </div>
        )
    }
}

export default CardContainer;

方案2：监听prop变化同步更新子组件state

如果确实需要在子组件内部独立维护users状态（比如子组件后续要单独修改这份用户列表），可以通过componentDidUpdate生命周期钩子监听prop变化，同步更新自身state：

class CardContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: this.props.users
        }
    }

    // 新增生命周期，prop变化时同步更新state
    componentDidUpdate(prevProps) {
        // 仅当users prop真的变化时才更新，避免不必要的重渲染和死循环
        if (prevProps.users !== this.props.users) {
            this.setState({ users: this.props.users })
        }
    }

    render() {
        return (
            <div class="row row-cols-1 row-cols-md-2 g-4">
                {
                    this.state.users.map(user => {
                        return <Card id={user.phone} title={user.name} email={user.email} phone={user.phone}></Card>
                    })
                }
            </div>
        )
    }
}

export default CardContainer;

内容的提问来源于stack exchange，提问作者Amit Gupta