停止中继:查询渲染器为某些 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 重新加载数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在 FutureBuilder Flutter 中停止循环 SetState

react组件生命周期

如何从无限重新渲染中停止反应组件

关于render渲染优化

如何停止设计器为用户控件上的公共属性生成代码?

尝试使用自定义渲染器为 JTable 的特定行着色,而不是我的所有行都着色