如何在React/Apollo中结合新<Query>组件使用setState()？

我懂你现在的困扰——旧的HOC方式我们已经摸得门清，但换成新的<Query>组件后，怎么把远程拉取的数据存到本地状态做编辑，直到确认完成再提交，确实需要调整思路。下面给你两种常用的实现方案，覆盖类组件和函数组件（含Apollo Hooks）的场景：

方案一：类组件结合<Query>组件 #

适合还在使用类组件的项目，核心是在组件内部维护本地状态，当<Query>获取到数据后同步到本地：

import React, { Component } from 'react';
import { Query, Mutation } from 'react-apollo';
import gql from 'graphql-tag';

// 定义查询和更新的GraphQL语句
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

const UPDATE_USER = gql`
  mutation UpdateUser($id: ID!, $name: String!, $email: String!) {
    updateUser(id: $id, name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

class UserEditor extends Component {
  constructor(props) {
    super(props);
    // 初始化本地状态
    this.state = {
      name: '',
      email: '',
      initialSyncDone: false // 标记是否已完成首次数据同步
    };
  }

  // 同步远程数据到本地状态
  syncDataToLocalState = (userData) => {
    this.setState({
      name: userData.name,
      email: userData.email
    });
  };

  // 处理表单输入变化
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  render() {
    const { userId } = this.props;
    const { name, email, initialSyncDone } = this.state;

    return (
      <Query query={GET_USER} variables={{ id: userId }}>
        {({ loading, error, data }) => {
          if (loading) return <div>加载中...</div>;
          if (error) return <div>出错了！{error.message}</div>;

          // 首次加载完成后同步数据，避免重复触发
          if (data.user && !initialSyncDone) {
            this.syncDataToLocalState(data.user);
            this.setState({ initialSyncDone: true });
          }

          return (
            <Mutation mutation={UPDATE_USER}>
              {(updateUser) => (
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    // 提交时用本地状态的数据
                    updateUser({
                      variables: {
                        id: userId,
                        name,
                        email
                      }
                    });
                  }}
                >
                  <div>
                    <label>姓名：</label>
                    <input
                      type="text"
                      name="name"
                      value={name}
                      onChange={this.handleInputChange}
                    />
                  </div>
                  <div>
                    <label>邮箱：</label>
                    <input
                      type="email"
                      name="email"
                      value={email}
                      onChange={this.handleInputChange}
                    />
                  </div>
                  <button type="submit">保存修改</button>
                </form>
              )}
            </Mutation>
          );
        }}
      </Query>
    );
  }
}

export default UserEditor;

这里的initialSyncDone标记很关键，确保我们只在数据首次加载时同步一次，避免后续状态更新导致的重复同步。

方案二：函数组件结合Apollo Hooks（推荐） #

现在Apollo Client更推荐用Hooks，useQuery和useMutation能让代码更简洁。核心思路还是用useState维护本地状态，useEffect监听远程数据变化并同步：

import React, { useState, useEffect } from 'react';
import { useQuery, useMutation } from '@apollo/client';
import gql from 'graphql-tag';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

const UPDATE_USER = gql`
  mutation UpdateUser($id: ID!, $name: String!, $email: String!) {
    updateUser(id: $id, name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

const UserEditor = ({ userId }) => {
  // 初始化本地状态
  const [localUser, setLocalUser] = useState({ name: '', email: '' });
  // 获取远程数据
  const { loading, error, data } = useQuery(GET_USER, { variables: { id: userId } });
  // 获取Mutation函数
  const [updateUser] = useMutation(UPDATE_USER);

  // 远程数据变化时同步到本地状态
  useEffect(() => {
    if (data?.user) {
      setLocalUser({
        name: data.user.name,
        email: data.user.email
      });
    }
  }, [data]); // 仅当data变化时触发

  // 处理输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setLocalUser(prev => ({ ...prev, [name]: value }));
  };

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault();
    updateUser({
      variables: {
        id: userId,
        name: localUser.name,
        email: localUser.email
      }
    });
  };

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了！{error.message}</div>;

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={localUser.name}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={localUser.email}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">保存修改</button>
    </form>
  );
};

export default UserEditor;

这个方案里，useEffect的依赖项设为data，只有远程数据加载完成或更新时，才会同步到本地状态，完美避免了不必要的重复更新。

关键注意点 #

• 避免无限循环：不管哪种方案，都要确保同步本地状态的逻辑只在必要时触发（比如首次加载、远程数据更新时）。
• 初始状态处理：如果表单要兼顾新建和编辑场景，可以根据data是否存在来设置本地状态的初始值。
• 数据验证：提交前最好对本地状态的数据做校验，确保符合后端要求，避免无效请求。

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