React组件中文件上传完成后如何传递refetch函数重新获取GraphQL数据？

我一眼就发现你代码里的问题啦——在input的onChange回调里，参数命名和函数调用都出了问题，才导致refetch变成undefined。咱们一步步来修正：

问题根源 #

你现在的input代码是这样的：

<input type="file" onChange={(refetch) => this.uploadFile(event, refetch)}/>

这里有两个明显的错误：

1. onChange的回调参数应该是事件对象event，你却把它命名成了refetch，这不仅拿不到上传事件，还把GraphQlDataFetcher回调里的真正refetch函数给覆盖了。
2. 你调用uploadFile时传的event根本没定义，因为箭头函数里的参数是refetch，上层没有这个event变量。

修正后的完整代码 #

class Admin extends React.Component {
  constructor(props) {
    super(props);
  }

  uploadFile = async (event, refetch) => {
    await uploadFileToBucket(event, true);
    // 加个判断避免意外的undefined，让代码更健壮
    if (refetch) {
      refetch();
    }
  };

  render() {
    return (
      <GraphQlDataFetcher query={getObjectsInDefaultBucket()}>
        {(data, refetch) => (
          // JSX必须有单一根元素，用Fragment包裹同级组件
          <>
            <Files files={data.bucketObjects}/>
            {/* 修正onChange的参数和调用逻辑 */}
            <input type="file" onChange={(event) => this.uploadFile(event, refetch)}/>
          </>
        )}
      </GraphQlDataFetcher>
    );
  }
}

export default Admin

关键修正点说明 #

• 正确传递refetch：在onChange的箭头函数里接收event，然后把GraphQlDataFetcher回调里的refetch作为第二个参数传给uploadFile，这样就能在上传完成后触发查询重新获取数据了。
• 修复JSX根元素问题：原来的代码里<Files>和<input>是同级元素，JSX不允许这样，所以用React Fragment（<>...</>）把它们包起来，避免渲染报错。
• 添加安全判断：在调用refetch前加个if (refetch)，防止因为某些边界情况导致refetch还是undefined的情况，提升代码稳定性。

这样修改后，文件上传完成后就能正常重新执行GraphQL查询啦！

内容的提问来源于stack exchange，提问作者Joe