我正在尝试将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,使用mapStateToProps
和componentWillReceiveProps
将传入的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/