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（）获得的更新值，通常是使用父类组件我可以很方便地访问该信息，但似乎功能组件的行为有所不同？还是由useEffect引起的？通常，我会为父级使用类组件，但是我使用的某些库依赖于Hooks，因此我不得不使用功能组件。

Answer 1

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

您应该适应提升状态的概念，这意味着如果您将用户传递给您的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>)
  );
};

Answer 2

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

此外，一旦执行[[...props.users]]，您将在每次更新时创建一个新的数组引用，因此无论使用哪种方式，useEffect的函数都将在每次更新时运行。 useEffect不会对数组/对象进行深度比较。你最好做[props.users]。

使用功能组件渲染后反应访问状态

2 个答案: