停止中继:查询渲染器为某些 setStates 重新加载数据
Posted
技术标签:
【中文标题】停止中继:查询渲染器为某些 setStates 重新加载数据【英文标题】:Stop Relay: Query Renderer in reloading data for certain setStates 【发布时间】:2019-12-21 22:50:57 【问题描述】:我目前正在关注this,我确实让它工作了。但我想知道是否有办法在调用 this.setState() 时阻止查询渲染重新加载数据。基本上我想要的是当我输入文本框时,我还不想重新加载数据,但由于呈现问题,我需要设置状态。我希望仅在单击按钮时重新加载数据,但数据将基于文本框值。
我尝试将文本框值状态与传递给 graphql 的实际变量分开,但似乎无论变量更改如何,查询都会重新加载。
这是代码 FYR。
const query = graphql`
query TestComponentQuery($accountId: Int)
viewer
userWithAccount(accountId: $accountId)
name
`;
class TestComponent extends React.Component
constructor(props)
super(props);
this.state =
accountId:14,
textboxValue: 14
onChange (event)
this.setState(textboxValue:event.target.value)
render ()
return (
<div>
<input type="text" onChange=this.onChange.bind(this)/>
<QueryRenderer
environment=environment
query=query
variables=
accountId: this.state.accountId,
render=( error, props ) =>
if (error)
return (
<center>Error</center>
);
else if (props)
const userWithAccount = props.viewer;
console.log(userWithAccount)
return (
<ul>
userWithAccount.map((name) => (<li>name</li>))
</ul>
);
return (
<div>Loading</div>
);
/>
</div>
);
【问题讨论】:
【参考方案1】:好的,所以我的最后一个答案没有按预期工作,所以我想我会创建一个全新的示例来展示我在说什么。简单地说,这里的目标是在父组件中拥有一个子组件,该子组件仅在收到新道具时才重新渲染。注意,我使用了组件生命周期方法shouldComponentUpdate()
来防止Child
组件重新渲染,除非道具发生变化。希望这对您的问题有所帮助。
class Child extends React.Component
shouldComponentUpdate(nextProps)
if (nextProps.id === this.props.id)
return false
else
return true
componentDidUpdate()
console.log("Child component updated")
render()
return (
<div>
`Current child ID prop: $this.props.id`
</div>
)
class Parent extends React.Component
constructor(props)
super(props)
this.state =
id: 14,
text: 15
onChange = (event) =>
this.setState( text: event.target.value )
onClick = () =>
this.setState( id: this.state.text )
render()
return (
<div>
<input type='text' onChange=this.onChange />
<button onClick=this.onClick>Change ID</button>
<Child id=this.state.id />
</div>
)
function App()
return (
<div className="App">
<Parent />
</div>
);
【讨论】:
以上是关于停止中继:查询渲染器为某些 setStates 重新加载数据的主要内容,如果未能解决你的问题,请参考以下文章