React hooks：在获取返回后调用子组件中的 props.function答案

【问题标题】：React hooks: Call props.function in child after a fetch returnReact hooks：在获取返回后调用子组件中的 props.function
【发布时间】：2020-02-23 22:47:58
【问题描述】：

更新

我的问题出在后端，我的 JSON 没有返回到我的 fetch 调用。愚蠢的错误。下面的前端代码应该可以工作。

我有一个子组件从其父组件接收函数increment()。它的工作是将父组件中的数字加 1。我将它传递给子组件，并希望在子组件中完成获取返回后调用它。但是，它没有被调用。有没有办法做到这一点？

这是父组件：

const Parent = () => {
  const [i, setI] = useState(0);

  const increment = () => {
    console.log("increment called");
    setI(i + 1);
  }

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

还有子组件：

const Child = (props) => {

  const doSomething = () => {
    fetch("/dosomething")
    .then((res) => res.json())
    .then((json) => {
      props.increment(); // <-- want this to be called here
    })
    .catch((err) => {
      console.log("err : ", err);
    });
  }

  return (
    <Button onClick={ doSomething }>Do Something</Button>
  )
};

【问题讨论】：

您确定它确实到达了props.increment()？在它之前做一个console.log(json)，看看它是否到达那里
fetch 是异步的，这意味着它应该在 useEffect 挂钩中。
@Cornel 啊，你是对的，我的后端有一个问题，没有返回 json。愚蠢的错误。感谢您为我指明正确的方向。上面的代码有效。

标签： reactjs

【解决方案1】：

你好，在增量函数上试试这个方法

const increment = () => {
    console.log("increment called");
    setI( prevI => prevI + 1);
  };

【讨论】：

【解决方案2】：

将 isFetching 状态放入您的 Child 组件。以 false 默认值启动它。单击按钮时，将其更改为 true。然后当 isFetching 为真时进行 fetch 调用。在您的增量函数之后将其转回 false。

const [isFetching, setIsFetching] = useState(false);

useEffect(() => {
  if(isFetching) {
    fetch("/dosomething")
    .then((res) => res.json())
    .then((json) => {
      props.increment(); // <-- want this to be called here
      setIsFetching(false)
    })
    .catch((err) => {
      console.log("err : ", err);
    });
}
}, [isFetching]);

对于您的按钮：

<Button onClick={ () => setIsFetching(true) }>Do Something</Button>

【讨论】：

【解决方案3】：

尝试在父组件中使用它：

import React from 'react';
import Child from './child';

const Parent = () => {
    const [i, setI] = React.useState(0);

    const increment = () => {
      console.log("increment called");
      setI(i + 1);
    }

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

export default Parent;

在子组件中这样做：

import React from 'react';

const Child = (props) => {


    const doSomething = () => {
        fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then((res) => res.json())
        .then((json) => {
        props.increment(); // increment is called here
        console.log(json)// <-- sample JSON Data
        })
        .catch((err) => {
        console.log("err : ", err);
        });

    }

    return (
      <button onClick={ doSomething }>Do Something</button>
    )
  };

export default Child;

【讨论】：