时间戳

首页 > 解决方案 > 使用功能组件渲染后响应访问状态

reactjs - 使用功能组件渲染后响应访问状态

问题描述

我是 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，所以我有点被迫使用功能性组件。

标签： reactjsfunctional-programmingcomponentsstate

解决方案

您尝试访问数据和传递数据的方式有几个错误。

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

这是一个受您上面共享的代码启发的代码沙箱。我希望这能回答你的问题，如果不是，请告诉我。

还分享下面的代码。

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>)
  );
};

推荐阅读