根据 Parent 的异步输入刷新 React 子功能组件

Question

我是一个 React 菜鸟（以前在 Angular 中工作过很多次），我有一个关于根据父级输入刷新 React 功能性子组件的问题。

问题 在下面的示例中，我尝试从 Promise 中获取一些数据，然后将它们作为 props 传递给 Child 组件。我使用 prop 值“Fake Url 1”初始化子项，并将其替换为 useEffect() 中的 promise 值，这是组件加载后要加载的第一个 Hook。但是即使我从父母那里改变了道具，孩子也不刷新。

我尝试了什么 1）所以我在承诺完成后改变了孩子的“道具”。那不应该用新的道具重新渲染孩子吗？ （我认为道具类似于角度的输入和输出） 2）我确实尝试更改父级的状态并强制重新加载，但这触发了无限循环，不知道为什么。 我尝试的代码是 ==> https://codepen.io/rohit2219/pen/mddPPaG

const { useEffect } = React;
const { useState } = React;

const Child = props => {
  let childUrl = props.url;

  //return (<div>{props.user}</div>)
  return <div>Child url : {childUrl}</div>;
};

const Parent = () => {
  let childData = "Fake Url 1";
  const [state, setState] = useState(false);

  useEffect(() => {
    childData = "Fake Url 2";
    let promise = axios.get(`https://api.github.com/users/mojombo`);
    promise.then(function(data) {
      console.log(data);
      childData = data.data.url;
      //setState(true) >> This state change triggered an infinite loop
      console.log("childData:");
    });
  });
  return (
    <div>
      <h1>Hello, World</h1>
      <Child url={childData} />
    </div>
  );
};

ReactDOM.render(<Parent />, document.getElementById("app"));

我确实看到了很多针对如下基于类的 React 组件执行此操作的示例，但对于功能组件却没有。 Updating child's state from parent component

Answer 1

您应该将一个空数组作为依赖项（在这种情况下您也应该将childData 传递给useEffect 以确保效果只会运行一次（componentDidMount），否则每次调用setState 都会触发新的渲染，再次调用效果等等...

  useEffect(() => {
    childData = "Fake Url 2";
    let promise = axios.get(`https://api.github.com/users/mojombo`);
    promise.then(function(data) {
      console.log(data);
      childData = data.data.url;
      //setState(true) >> This state change triggered an infinite loop
      console.log("childData:");
    }, [childData])

childData 既没有绑定到state 也没有绑定到props，它只是一个let，React 不知道如何对它的更改做出反应。

const Component = () =>{
    const [childProp, setChildProp] = useState('foo')

    useEffect(() => setChildProp('bar'),[])

    return <Child childProp={childProp} />
}