javascript - 停止继电器: Query Renderer in reloading data for certain setStates

Question

我目前正在关注 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>

        );
    }
}

Answer 1

好吧，我的最后一个答案没有按预期工作，所以我想我应该创建一个全新的示例来演示我在说什么。简而言之，这里的目标是在父组件中创建一个子组件，仅在收到新的 props 时才重新渲染。请注意，我使用了组件生命周期方法 shouldComponentUpdate() 来防止 Child 组件重新渲染，除非 prop 发生更改。希望这有助于解决您的问题。

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>
  );
}