我正在尝试将setState()设置为来自graphQL的查询结果,但是我很难找到如何执行此操作的方法,因为它将始终处于加载状态,或者仅从props中使用。
我先设定状态

constructor (props) {
        super(props);
        this.state = { data: [] };

然后我有这个查询
const AllParams = gql`
    query AllParamsQuery {
        params {
            id,
            param,
            input
        }
    }`

当它回来时,我可以使用this.props.AllParamsQuery.params访问它

在不返回 this.setState({ data: this.props.AllParamsQuery.params }) 的情况下,应如何以及何时 {data: undefined}

我还没有找到一种方法来等待它,即undefined,也就是loading: true,然后是setState。我尝试了componentDidMount()componentWillReceiveProps()(包括async function(){...await...}),但未成功,我可能做错了。有人知道如何正确执行此操作或有示例吗?

编辑+回答:您不应设置状态,而应将其留在 Prop 中。 checkout 此链接:“为什么在props.js中将props设置为状态是亵渎神灵” http://johnnyji.me/react/2015/06/26/why-setting-props-as-state-in-react-is-blasphemy.html
更新 Prop 还有很多问题,但可以在此应用程序创建教程中找到一些出色的示例:https://www.howtographql.com/react-apollo/8-subscriptions/

最佳答案

一个简单的解决方案是将您的Apollo查询组件和React状态组件分开。来自Redux,使用mapStateToPropscomponentWillReceiveProps将传入的props转换为本地组件状态并不罕见。
但是,这种模式会使Apollo的<Query />变得困惑。

因此,只需创建一个单独的组件即可获取数据:

...

export class WidgetsContainer extends Component {
  render (
    <Query query={GET_WIDGETS}>
      {({ loading, error, data }) => {
        if (loading) return <Loader active inline="centered" />;

        const { widgets } = data;
        return (
          <Widgets widgets={widgets} />
        )
      }}
    </Query>
  )
}

现在,Widgets组件现在可以正常使用setState了:
...
export class Widgets extends Component {
  ...
  constructor(props) {
    super()

    const { widgets } = props;
    this.state = {
      filteredWidgets: widgets
    };
  }

  filterWidget = e => {
    // some filtering logic
    this.setState({ filteredWidgets });
  }

  render() {
    const { filteredWidgets } = this.state;
    return (
      <div>
        <input type="text" onChange={this.filterWidgets} />
        {filteredWidgets.count}
      </div>
    )
  }
}

关于reactjs - 如何使用graphQL在React/Apollo中设置setState(),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46457029/

10-13 06:32