使用功能组件渲染后的实际访问状态

Question

我是具有React功能组件的新手，我有一个子组件和父组件，它们的某些状态已通过useEffect更新，这些状态显然在渲染后会重置为其初始值。

父级有一个传递给子级的用户列表：

父母：

const Parent = () => {
   const [users, setUsers] = useState([])
   const getUsers = () => {
   setUsers(["pedro", "juan"])
  }
    useEffect(() => {
        getUsers() 
    }, []);

   return <div> 
    <Child users={users} /> 
}

儿童：

const Child = () => {
   const [users, setUsers] = useState([])
  useEffect(() => {
    setUsers(props.users)
  }, [[...props.users]]);
}

如果我出于任何原因尝试从子组件或父组件访问状态（用户），我都会得到一个初始值，它是一个空数组，而不是从getUsers（）获得的更新值，通常是使用父类组件我' d可以轻松访问该信息，但似乎功能组件的行为有所不同？还是由useEffect引起的？通常，我会为父级使用类组件，但是我使用的某些库依赖于Hooks，因此我不得不使用功能组件。

Answer 1

对我来说，在Child处执行const [users, setUsers] = useState([])是没有意义的。为什么不通过道具传递users和setUsers？您孩子的setUser将仅更新其本地用户的状态值，而不更新其父母的状态值。总体而言，在其子级周围复制父状态并不好，您最好使用它并通过道具进行更新。

而且，一旦您执行了[[...props.users]]，您将在每次更新时创建一个新的数组引用，因此无论如何，useEffect的函数都将在每次更新时运行。 useEffect不会对数组/对象进行深度比较。您最好执行[props.users]。

Answer 2

[您尝试访问数据并传递数据的方式存在一些错误。

您应该适应提升状态的概念，这意味着，如果您将用户传递给您的Child组件，请确保有关添加或删除或更新用户的所有逻辑都保留在Parent函数和Child组件内仅负责显示用户列表。

Here是一个代码沙箱，其灵感来自您上面共享的代码。希望这能回答您的问题，否则请通知我。

也共享下面的代码。

import React, { useState } from "react";

export default function Parent() {
  const [users, setUsers] = useState([]);
  let [userNumber, setUserNumber] = useState(1); // only for distinctive users, 
    //can be ignored for regular implementation

  const setRandomUsers = () => {
    let newUser = {};
    newUser.name = `user ${userNumber}`;
    setUsers([...users, newUser]);
    setUserNumber(++userNumber);
  };

  return (
    <div className="App">
      <button onClick={setRandomUsers}>Add New User</button>
      <Child users={users} />
   </div>
  );
}

const Child = props => {
  return (
    props.users &&
    props.users.map((user, index) => <div key={index}>{user.name}</div>)
  );
};