Question

我试图创建一个“ Loader” HOC，该HOC将显示一个加载器，直到被加载，然后渲染子代。但是我在传递给加载器cant read .foo of null的JSX中遇到错误。

似乎子级在传递给Loader HOC之前已经“渲染”（即内插字符串等）；我希望将子级作为函数或某种东西传递，然后仅在HOC的条件要求渲染其子级时进行评估。不是吗？

const Loader = ({
  isLoading = false,
  children,
}) => {

  const [showLoader, setShowLoader] = React.useState(isLoading);

  // when isLoading changes, update showLoader
  React.useEffect(() => {
    if(isLoading !== showLoader) {
      setShowLoader(isLoading);
    }
  }, [isLoading]);

  console.log(`Loader rendering with isLoading: ${isLoading} and showLoader: ${showLoader}`)
  return showLoader ? (<div> Loading... </div>) : children;
}

const App = () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [recordData, setRecordData] = React.useState(null);

  React.useEffect(() => {
    // after 3 seconds, stop showing loader
    console.log('setting state...');
    setRecordData({ foo: 'bar '});
    setTimeout(() => setIsLoading(false), 3000);
  }, []);

  return (
    <div>
        <Loader isLoading={isLoading}>
          <div>
            <p>This is the App, foo is {recordData.foo}</p>
          </div>
        </Loader>
    </div>
 );

}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

何时渲染组件都没有关系。属性是在代码找到它们时立即计算的。 recordData.foo只是一个由解释器计算的表达式，并将计算出的值作为p元素的子代传递。因此自然地，首先呈现recordData就是null，这会导致错误。

在将“子代”传递给父代组件之前会做出什么反应？

1 个答案: