如何从不是父或子的另一个组件更改功能组件的状态？答案

【问题标题】：How to change functional component's state from another component that is not a parent or a child?如何从不是父或子的另一个组件更改功能组件的状态？
【发布时间】：2020-08-15 09:18:15
【问题描述】：

在我的代码中，我有一个功能组件，它使用“加载更多”分页来呈现数据库中的用户列表，当您单击用户时，它会在一些操作旁边显示用户的详细信息是列表，类似于文件资源管理器。其中一项操作是删除用户。当您这样做时，用户列表不会更新，如果您单击刚刚删除的用户，则会出现执行错误，因为代码尝试使用来自空对象的信息。在不使用类组件的情况下，在用户删除时更新列表组件的最佳方法是什么？

App.js - 列表和细节组件的父级

<BrowserRouter>
  <div id = "app">
    <div className = "section sectionTop">
      <Route path = "/" component = {BaseTop}/>
    </div>
    <div className = "Main">
      <div className = "section sectionMain sectionLeft">
      <Route path = "/" component = {BaseLeft}/>
      </div>
      <div className = "section sectionMain sectionCenter">
        <Route path = "/" exact component = {BaseCenter}/>
        <Route path = "/listusers" component = {UserList}/>
      </div>
      <div className = "section sectionMain sectionRight">
        <Route path = "/" exact component = {BaseRight}/>
        <Route path = "/adduser" component = {UserAdd}/>
        <Route path = "/listusers/:id" component = {UserInfo}/>
      </div>
    </div>
  </div>
</BrowserRouter>

UserList.js - 用户列表

const [users, setUsers] = useState ([]);
const [page, setPage] = useState (0);

useEffect
(
    () =>
    {
        setPage (page+1);
    },
    []
);

useEffect
(
    () =>
    {
        try
        {
            const runEffect = async () =>
            {
                const response = await api.get
                (
                    `/users?page=${page}`
                );
                setUsers ([...users, ...response.data.docs]);
            }
            runEffect();
        }
        catch (error)
        {
            console.log (error);
        }
    },
    [page]
);

return (
    <div className = "userListArea">
        {
            users.map
            (
                (user, index) =>
                {
                    return (
                        <div key = {index} className = "user">
                            <Link key = {index} to = {`/listusers/${user._id}`}>
                                <button
                                className = "buttonUser"
                                key = {index}>
                                    {user.name}
                                </button>
                            </Link>
                        </div>
                    )
                }
            )
        }
        <button
        className = "buttonLoadMore"
        onClick = {() => setPage (page+1)}>
            Carregar mais
        </button>
    </div>
)

UserInfo.js - 用户的详细信息

const [user, setUser] = useState ({});
const [_id, set_id] = useState ("");

useEffect
(
    () =>
    {
        if (user.hasOwnProperty ("_id") === false)
        {
            set_id (match.params.id);
        }
        else
        {
            if (user._id !== match.params.id)
            {
                set_id (match.params.id);
            }
        }
        const runEffect = async () =>
        {
            const response = await api.get
            (
                "/searchuser",
                {
                    params:
                    {
                        _id
                    }
                }
            )
            if (user.hasOwnProperty ("name") === false)
            {
                setUser (response.data);
            }
            else
            {
                if (user.name !== response.data.name)
                {
                    setUser (response.data);
                }
            }
        }
        runEffect();
    }
);

async function handleDeleteUser (_id)
{
    if (window.confirm(`Você realmente deseja remover o usuário ${user.name}?`))
    {
        const response = await api.delete
        (
            "/users",
            {
                params:
                    {
                        _id
                    }
            }
        );
        if (response.data._id === _id)
        {
            window.alert(`O usuário ${user.name} foi excluído.`);
        }
    }
}

return (
    <div className = "userInfoArea">
        <div className = "name">{user.name}</div>
        <div className = "email">{user.email}</div>
        <button className = "buttonEdit">Editar</button>
        <Link to = "/listusers">
            <button
            className = "buttonDelete"
            onClick = {() => handleDeleteUser (user._id)}
            >
                Excluir
            </button>
        </Link>
    </div>
)

【问题讨论】：

您好。您布置路由器的方式非常奇怪，并且会给您的组件继承增加很多复杂性。你能重构它，让每条路线都有一个带有部分的模板吗？
如果不使用外部状态管理解决方案，例如Redux 或新的useContext hook，您将无法更新非父或子组件的状态
@Redline 非常感谢。 useContext 钩子做得很好。除了在那种情况下使用它之外，我将能够在存储当前登录的用户时使用它。
@DanielDuong 我明白了。我将按照您建议的方式组织我的代码。但是，就目前而言，Redline 已经回答了我的问题，我认为我没有必要更新这个问题。但是，如果出于任何原因，您真的希望看到代码组织，请告诉我，我会更新问题。
@Capeudinho 刚刚发布了一个答案，以防其他人遇到同样的问题

标签： javascript reactjs react-router components react-hooks

【解决方案1】：

如果不使用外部状态管理解决方案（例如Redux 或新的useContext api/hook），您无法更新不是父级或子级的组件的状态。这些库涉及将所有单个组件的状态移动到更大的集中式全局状态，所有组件都可以更新和访问该状态。

【讨论】：