时间戳

首页 > 解决方案 > 尝试从反应功能组件方法返回多个值

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

问题描述

我试图从下面的方法返回多个值，并得到一个错误，如语句中预期的属性分配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 };
};

property assignment is expected并在下面的行中出现错误

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

标签： javascriptreactjsecmascript-6react-hooks

解决方案

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

你只需要在 return 语句中用 <React.Fragment> 标签包裹你的代码

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>
);

推荐阅读