javascript - 尝试从 react 功能组件方法返回多个值

Question

我试图从下面的方法返回多个值，并收到一个错误，例如 return 语句中预期的属性分配，我的方法如下所示，

export const useSectionQuery = (query, resultFieldName, updateState, transform, initialRevisionId) => {

  const [completed, setCompleted] = useState(false);
  let  transformed;
  const { loading, error } = useQuery(query, {
    variables: {
      where: initialRevisionId ? { initialRevisionId } : { isApproved: true },
      order_by: null
    },
    fetchPolicy: 'network-only',
    onCompleted: data => {
     transformed = transform ? transform(data[resultFieldName]) : data[resultFieldName];
      updateState(draft => {
        draft[resultFieldName] = transformed;
      });
      setCompleted(true);
    }
  });
  if (error) return errorRedirectElement(error, resultFieldName);
  return {(!completed || loading) && loadingElement, transformed };
};

并在下面的行中收到错误需要属性分配

 return {(!completed || loading) && loadingElement, transformed }

Answer 1

React v16.2 引入了另一种返回多个元素的方式。 React.Fragment仅通过一个空标签以 JSX 方式抽象。请记住，JSX 语法不支持属性 - 如果需要，请使用详细的方式。不需要额外的组件，没有数组符号，没有键。不错!

您只需在返回语句中使用 标记包裹代码

const App = () => (
  <React.Fragment>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
    <p>React 16 can return multiple elements ❤️</p>
  </React.Fragment>
);