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

Question

我是一个 React 新手(之前在 Angular 工作过一段时间)，我有一个关于根据父级输入刷新 React 功能子组件的问题。

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

我尝试过的1)所以我在 promise 完成后改变 child 的“ Prop ”。不应该用新 Prop 重新渲染 child 吗？ (我认为 Prop 类似于角度的输入和输出)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 既不绑定(bind)到 state 也不绑定(bind) props 它只是一个 let，React 不知道如何对它的变化使用react。

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

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

    return <Child childProp={childProp} />
}