根据来自父级的异步输入刷新React子功能组件

Question

我是一个react Noob（以前在angular工作过很多次），我有一个关于根据父母的输入刷新react功能性子组件的问题。

下面这个例子中的问题是，我试图从一个promise中获取一些数据，然后将它们作为道具传递给一个子组件。我用一个道具值“fake Url 1”初始化子级，并用useEffect（）中的promise中的值替换它，这是组件加载后加载的第一个钩子。但即使我从父母那里换了道具，孩子也不清爽。

我尝试了1）所以在promise完成后，我改变了孩子的“道具”。难道不应该用新的道具重新呈现孩子吗？（我认为道具类似于angular中的输入和输出）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组件的例子，比如下面，但对于功能性组件却一无所获。从父组件更新子组件的状态

Answer 1

您应该将一个空数组作为依赖项传递给useEffect(ChildData)，以确保效果只运行一次(componentDimmount)，否则每次调用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既没有绑定到状态也没有绑定到道具它只是一个let，React不知道如何对它的更改做出反应。

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

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

    return <Child childProp={childProp} />
}