Question

目前我有一个apollo客户端，其文本框将通过typeahead格式填充自动填充。我正在使用react-autosuggest填写建议。

在我的代码中我有一个HOC，我也会触发重新获取并在文本框onChange上设置变量。

const TypeAheadWithData = graphql(TypeAheadQuery, {
  options: ({ name }) => ({ variables: { name } })
})(TypeAhead);
export default TypeAheadWithData;

目前我有两个问题。一，当我输入信息时，不会获取更新的结果，而是显示先前的预先输出结果。例如，如果我有一个字符串'san'并且我添加'sand'它将显示'san'查询的结果。当我重新获取数据时，我无法等待数据异步。基本上试图弄清楚如何等待重新获取异步。或者其他一些形式。 Obsservable / Watch Query也许。在这方面的任何指导都会有很大帮助。

function getSuggestionValue(suggestion) {
  return suggestion.name;
}

function renderSuggestion(suggestion) {
  return (
    <span>{suggestion.name}</span>
  );
}
class TypeAhead extends React.Component {
  constructor() {
    super();

    this.state = {
      value: '',
      suggestions: [],
      isLoading: false
    };
  }

  componentWillReceiveProps() {
    this.setState({
      suggestions: this.props.data.characters
    });
  }

  onChange = (event, { newValue }) => {
    console.log(newValue);
    //this.props.data.variables.name = newValue;
    this.props.data.refetch({name: newValue});
    this.setState({
      value: newValue
    });
  };

  shouldRenderSuggestions(value) {
    return value.trim().length > 2;
  }

  onSuggestionsFetchRequested = ({ value }) => {
    //this.props.data.refetch({});
    // this.setState({
    //   suggestions: this.props.data.characters
    // });
    // this.loadSuggestions(value);
  };

  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  render() {
    const { value, suggestions, isLoading } = this.state;
    const inputProps = {
      placeholder: "Type 'c'",
      value,
      onChange: this.onChange
    };
    const status = (isLoading ? 'Loading...' : 'Type to load suggestions');

    return (
      <div>
        <div className="status">
          <strong>Status:</strong> {status}
        </div>
        <Autosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
          shouldRenderSuggestions={this.shouldRenderSuggestions}
          inputProps={inputProps} />
      </div>
    );
  }
}

const TypeAheadWithData = graphql(TypeAheadQuery, {
  options: ({ name }) => ({ variables: { name } })
})(TypeAhead);
export default TypeAheadWithData;

我遇到的主要问题是建议使用之前加载的建议列表。因为它没有等待重新获取，并且在接收到新的一组时它根本没有更新状态。

Answer 1

如果您已经从Apollo收到道具建议，则无需使用该组件的状态。我会将你的初始状态改为：

this.state = {
  value: '',
  isLoading: false
};

然后你可以在里面得到你的建议：

const suggestions = this.props.characters || []

查看react-autosuggest的文档，我还会将重新调用调用移至onSuggestionsFetchRequested。我想像你应该使用onChange那样也应该工作，但这涵盖了我们希望再次获得建议的更多潜在场景。

onSuggestionsFetchRequested = ({ value }) => {
  this.props.data.refetch({name: value});
};

Apollo客户端和提前输入

1 个答案: