javascript - 当状态更改发生在 ReactJS 中的不同 .js 文件的组件中时，如何更新我的 useEffect Hook ？

Question

我正在尝试在 useEffect() 中进行 API 调用，并希望每次在后端添加新数据时调用 useEffect()。我制作了一个自定义按钮(AddUserButton.js)，它在后端添加了一个新用户。我正在尝试显示所有用户的文件 (ManageUsers.js) 中导入此按钮。我只是想制作一个 useState 以在每次单击添加按钮时进行跟踪，并根据它进行 useEffect 刷新。例如:

const [counter, setCounter] = useState(0);
...
const handleAdd = () => {
  setCounter(state => (state+1));
};
...
useEffect(() => {
 // fetch data here
 ...
}, [counter]);
...
return(
 <Button onClick = {handleAdd}> Add User </Button>

);

但目前因为我有两个 .js 文件，我不确定如何使我的上述逻辑在这种情况下工作

ManageUsers.js

import AddUserButton from "./AddUserButton";
...
export default function ManageShades() {
...
useEffect(() => {
  axios
  .get("/api/v1/users")
  .then(function (response) {
    // After a successful add, store the returned devices
    setUsers(response.data);
    setGetUserFailed(false);
  })
  .catch(function (error) {
    // After a failed add
    console.log(error);
    setGetUserFailed(true);
  });
console.log("Load User useeffect call")

 },[]);
 return (
<div>
  ...
    <Grid item xs={1}>
      
      <AddUserButton title = "Add User" />
      
    </Grid>
  ...
</div>
);
}

AddUserButton.js

export default function AddDeviceButton() {
...

return (
 <div>
  <Button variant="contained" onClick={handleClickOpen}>
    Add a device
  </Button>
 ...
 </div>
 );
} 

Answer 1

一种常见的方法是将回调函数传递给更新父组件状态的按钮组件。

import { useState, useEffect } from "react";

const AddUserButton = ({ onClick }) => {
  return <button onClick={onClick} />;
};

export default function Test() {
  const [updateCount, setUpdateCount] = useState(false);
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count++);
  }, [updateCount]);

  return (
    <div>
      <AddUserButton
        onClick={() => {
          // do something, e.g. send data to your API
          // finally, trigger update
          setUpdateCount(!updateCount);
        }}
      />
    </div>
  );
}