React Apollo新手求助：如何将state值作为查询参数传递

嘿，我来帮你搞定这个问题！先梳理下你当前代码里的两个核心问题，再给你两种实用的解决方案：

首先，先修正一个小细节：setState是异步操作，你现在在调用setState后立刻打印this.state.selectCarcolor，拿到的会是旧值，得改成用回调函数获取更新后的state：

onChangeCarColor(e){
  const selectedColor = e.target.value;
  this.setState(
    { selectCarcolor: selectedColor },
    () => console.log("color " + this.state.selectCarcolor) // 这里才能拿到最新值
  );
}

接下来是核心的GraphQL查询变量问题：你当前的graphql高阶组件（HOC）的options函数只会在组件挂载时执行一次，而且它的props参数是组件的外部传入props，不是内部state，所以直接拿不到selectCarcolor。下面给你两种可行的解决思路：

方案一：手动调用refetch触发查询更新 #

这是最直接的方法，不需要调整组件结构。graphql HOC会给你的组件传入data props，其中包含refetch方法，你可以在颜色变化时手动调用它，传递新的查询变量：

onChangeCarColor(e){
  const selectedColor = e.target.value;
  this.setState({ selectCarcolor: selectedColor }, () => {
    // 用新颜色重新发起查询
    this.props.data.refetch({ color: selectedColor });
  });
}

// 初始查询可以设置一个默认颜色
const datafetch = graphql(Cquery, {
  options: () => ({
    variables: { color: "default-color" }, // 替换成你的默认颜色值
  })
});

每次选择新颜色时，都会重新发起GraphQL查询，使用最新的颜色参数。

方案二：让查询自动跟随状态更新（推荐） #

如果你希望查询能自动随着颜色选择变化而更新，可以把状态提升到props中（或者用状态管理工具），让graphql HOC的options依赖props：

子组件实现 #

class YourComponent extends React.Component {
  onChangeCarColor(e){
    // 调用父组件传递的方法更新状态
    this.props.onColorChange(e.target.value);
  }

  render() {
    return (
      <select onChange={(e) => this.onChangeCarColor(e)} value={this.props.selectCarcolor}>
        {/* 你的颜色选项 */}
        <option value="red">Red</option>
        <option value="blue">Blue</option>
      </select>
    );
  }
}

// 现在options可以直接从props获取颜色值
const datafetch = graphql(Cquery, {
  options: (props) => ({
    variables: { color: props.selectCarcolor },
  })
});

export default datafetch(YourComponent);

父组件传递状态 #

class ParentComponent extends React.Component {
  state = { selectCarcolor: "red" }; // 初始颜色

  handleColorChange = (color) => {
    this.setState({ selectCarcolor: color });
  }

  render() {
    return (
      <YourComponent 
        selectCarcolor={this.state.selectCarcolor}
        onColorChange={this.handleColorChange}
      />
    );
  }
}

这样当父组件的selectCarcolor状态变化时，子组件的props会更新，graphql HOC会自动重新计算options并发起新的查询。

如果你不想提升状态到父组件，也可以用recompose库的withState把状态转化为props，实现类似效果：

import { compose, withState, withHandlers } from 'recompose';
import { graphql } from 'react-apollo';

const enhance = compose(
  // 用withState管理颜色状态，转化为props
  withState('selectCarcolor', 'setSelectCarcolor', 'red'),
  // 处理颜色变化的方法
  withHandlers({
    onChangeCarColor: ({ setSelectCarcolor }) => (e) => {
      setSelectCarcolor(e.target.value);
    }
  }),
  // 关联GraphQL查询，从props获取变量
  graphql(Cquery, {
    options: (props) => ({
      variables: { color: props.selectCarcolor },
    })
  })
);

// 无状态组件
const ColorSelectComponent = (props) => (
  <select onChange={props.onChangeCarColor} value={props.selectCarcolor}>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
  </select>
);

export default enhance(ColorSelectComponent);

这样就能完美实现你想要的效果：下拉选择颜色时，自动用新颜色作为参数发起GraphQL查询啦！

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