如何在 axios 函数中将挂钩状态从一个组件传递到另一个组件？

Question

我正在尝试将挂钩状态传递给 Axios 函数内的另一个组件。状态初始值为false，但是当方法post发生在axios时，在then()里面我将状态设置为 true，在本例中为 setShowFlagCreate(true) 我试图将此状态传递给 UserList.js 组件，但我不知道如何操作。通过后，我想使用此状态在 UserList.js 页面

上显示标志（表示已创建用户。）

我该怎么做？

UserCreate.js

export default function UserCreate({}) {

const [showFlagCreate, setShowFlagCreate] = useState(false)

const save = async () => {

    const UserParams = {
      userName:
        currentUser
      Gender: gender,
      country: USA,
    };
 
    await axios
      .post(
        process.env.REACT_APP_URL, userParams
      )  
      .then((response) => {
        navigate("/userlist");
        setShowFlag(true); //I want this state to pass it on the UserList component as true
      })
      .catch((error) => {
        console.log(error);
      });
  

    };
}
return(
  <div>
  </div>
)

UserList.js

export default function UserList() {

  const [showFlagCreate, setShowFlagCreate] = useState(false)

useEffect(() => {
    axios
      .get(process.env.REACT_API_URL + usersParams) //geting the user form db
      .then((response) => {
        response.data.forEach(function (item) {
          let newUser = {
            id: user.id,
            name: Username,
            gender: "male",
            description: "stuff",
          };
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
        <FlagCreate show={showFlagCreate} setShow={setShowFlagCreate}/> //passing the props
     </div>
);
}

我想获取 UserList 组件中的状态并显示标志，因为状态为真。

FlagCreat.js

export default function FlagCreate({ show, setShow }) {
 <div>
     <div>
        <p>The user that you have been created is saved.</p>
    </div>
    <div>
      <button onClick={() => {setShow(false)}}>
          <span >Close</span>
      </button>               
 </div>
}

想法是在 UserCreate.js 中 setShowFlagCreate 变为 true 之后，标志必须显示在 UserCreate 组件中。我怎样才能让它发挥作用？

Answer 1

您可以在 contextApi 中定义此状态并在您需要的任何地方共享它 - you can read about it here

Answer 2

您应该做的是在调用 navigation 时传递状态在 UserList 中检索该状态。

用户创建

navigate("/userlist", { state: { showFlag: true } });

用户列表

const { state } = useLocation();
const { showFlag } = state; // use showFlag the way you want.

您可以通过

了解更多它的工作原理

如何在 axios 函数中将挂钩状态从一个组件传递到另一个组件？

How to pass a hook state from one component to another in a axios function?

reactjs

react-router-dom

react-hooks