如何在子组件中重新渲染父 onClick [使用 react-hooks]？

如何解决如何在子组件中重新渲染父 onClick [使用 react-hooks]？

我希望父应用程序在用户单击子组件中的删除时重新获取。我的想法是创建一个在删除时更改的虚拟计数器状态。但是父状态并没有改变。这样做的最佳方法是什么？

Parent.js

function Parent() {
  const [state,setState] = useState(1);
  const token = localStorage.getItem("auth-token");
  useEffect(() => {
    axios
      .get(`${BACK_PORT}/data/mypet`,{ headers: { "auth-token": token } })
      .then(function (response) {
        setMyPetData(response?.data);
        // console.log("uuu",myPetData);
        console.log("ooo",response);
      })
      .catch(function (error) {
        console.log(error);
      });
  },[token,state]);
  return (
    <div>
      <Child state={state} setState={setState} />
    </div>
  );
}

Child.js

function Child() {
    const onDelete = ({ state,setState }) => {
      setState(state + 1)
    };
    return (
        <div></div>
    )
}

解决方法

您必须将 state 中的 setState、Child 视为道具，而不是 onDelete 的参数：

function Child(props) {
    const onDelete = () => {
      props.setState(props.state + 1)
    };
    return (
        <div></div>
    )
}

,

我想您可以使用单独的“triggerFetch”状态来触发另一个提取。将回调传递给孩子以触发数据获取。

function Parent() {
  ...
  const [fetchData,setFetchData] = useState(false); // (0) <-- create fetchData state

  const token = localStorage.getItem("auth-token");

  useEffect(() => {
    fetchData && axios // (3) <-- if fetchData true,then fetch
      .get(`${BACK_PORT}/data/mypet`,{ headers: { "auth-token": token } })
      .then(function (response) {
        setMyPetData(response?.data);
        // console.log("uuu",myPetData);
        console.log("ooo",response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .finally(() => setFetchData(false)); // (4) <-- reset back to false when complete
  },[fetchData,token,state]); // (2) <-- add dependency

  const triggerFetch = () => setFetchData(true); // (1) <-- set true to trigger

  return (
    <div>
      <Child fetchData={triggerFetch} />
    </div>
  );
}

孩子

function Child({ fetchData }) {
  return (
    <div onClick={fetchData}>Click me to make parent fetch data!</div>
  )
}