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

Question

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

这是代码示例

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

可以worked-around如下：

在您的子组件 MyComponent 中，您有 response.data，即 null/undefined 在组件的第一个挂载处，您始终可以运行如下检查 response && response.data，添加 response &&，将检查 response 对象是否存在，如果存在，将 return 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>
  );
};

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

How to ignore exceptions for children before rendering the component?

javascript

asynchronous

reactjs

react-hooks