javascript - 如何在渲染组件之前忽略子项的异常？

Question

我正在编写一个WithLoading组件，如果加载为假，它将呈现子项，否则呈现加载文本。子项包含来自 ajax 调用的响应的参数。但是当它创建孩子（而不是渲染它们）时，响应为空，并引发异常。如何在呈现之前忽略异常？

这是代码示例

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";


function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

const WithLoading = props => {
  if (props.loading) {
    return <div>loading...</div>;
  } else {
    return props.children;
  }
};

const MyComponent = () => {
  const [response, setResponse] = useState(null);
  useEffect(() => {
    setTimeout(() => {
      setResponse({ data: "data" });
    }, 1000);
  });
  return (
      <WithLoading loading={!response}>
        <div>{response.data}</div>
      </WithLoading>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

可以按如下方式解决：

在您的子组件MyComponent中，您有response.data/null在undefined组件的第一次挂载时，您始终可以按如下方式运行检查response && response.data，添加response &&, 将检查response对象是否存在，如果存在，将返回response.data您想要的数组。

Answer 2

使您children的回调而不是元素：

const WithLoading = props => {
  if (props.loading) {
    return <div>loading...</div>;
  } else {
    return props.children();
  }
};

const MyComponent = () => {
  const [response, setResponse] = useState(null);
  useEffect(() => {
    setTimeout(() => {
      setResponse({ data: "data" });
    }, 1000);
  });
  const children = useCallback(
    () => <div>{response.data}</div>,
    [response]
  );

  return (
    <WithLoading loading={!response}>
      {children}
    </WithLoading>
  );
};