数组不重新渲染的 useState

Question

我在使用带有数组的 useState 钩子时遇到问题。我检查了stackoverflow上的各种资源，但无法修复它。

我的基本代码 sn-p 看起来像：

const [users, setUsers] = useState([]);

  function addNewContact(user) {
    const newUsers = [...users,user];
    console.log(newUsers);
    setUsers(newUsers);
  }

<CardContainer users={users}></CardContainer>

class CardContainer extends Component {

    constructor(props) {
        super(props);
        console.log("this -> ");
        console.log(this.props.users);
        this.state = {
            users: this.props.users
        }
    }

    render() {
        //console.log(this.state.users)
        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;

我能够在控制台中看到更新的数组，但使用它的组件不会再次呈现。谁能帮我解决这个问题。

Answer 1

问题是由于您将道具存储在子组件的状态中，该状态是在组件初始化时分配的，并且组件初始化/构造函数只运行一个，直到重新安装。之后，每当父组件的状态发生变化时，子组件都不会重新渲染，因为它使用自己的状态进行映射。

下面的代码只在组件初始化时运行一次。

this.state = {
   users: this.props.users
}

在子组件中，你可以直接使用props，子组件总是会在父组件发生变化时重新渲染。您可以直接从 this.props.users.map 这样的道具映射数组，而不是 this.state.users.map。这样，组件将在父组件的状态更改时重新渲染。

Answer 2

正如@Junaid 所说，constructor 在组件安装之前只被调用一次。如果确实需要在子组件内部单独设置状态，那么可以使用componentDidUpdate(prevProps)react生命周期方法。确保比较以前和当前的道具，以避免重新渲染的无限循环。

componentDidUpdate(prevProps) {
  if (this.props.users !== prevProps.users) {
    this.setState({ users: this.props.users });
  }
};