Javascript 单击时如何实时更新组件？

我正在开发ReactJS、Redux和GraphQL堆栈的ReactJS组件a

我的数据流是，当用户在另一个组件B上单击图像或特定函数时，它会发送一些关于文档的数据，以便通过GraphQL在组件a上的我的数据库中获取

我的困难在于，当我点击图像时，我的反应会落后一步。从技术上讲，是更新的GraphQL状态

如何使渲染与触发查询的图像单击同步

这里是my component.js：

import React, { Component } from 'react';
import style from "./Displayer.css";

import client from "apollo-client"
import {graphql, Query} from "react-apollo";
import gql from "graphql-tag";

import equal  from 'deep-equal';

class Displayer extends Component { 

    // some data
    backgroundUrl =  {
    foo
    }

    recipe; // declare the recipe variable in order to handle the reception on data ulteriously 

    // my try to render the component immediatly
    shouldComponentUpdate (nextProps) {
    const currentRecipe = this.props.data.recipe;
    const nextRecipe = nextProps.data.recipe;

    // deep check if the previous values and next values are similars
   // if not, rerender the component
    if (!equal(currentRecipe,  nextRecipe)) {
    if(this.props.data.recipe) { 
        var {title, description} =    this.props.data.recipe
        return this.recipe=  (
            <div className={style.dish_details} >
                <p> Title: {title}   </p>
                <p> Description: {description}  </p>
            </div>
        ) 
        // if there is no recipe data, just display a simple text
        }else{ 
        return this.recipe= <div>  Here details </div>
        }
     // if the values are similars don't rerender the component
    }else {
        return false;
    }
    }

    render() {       
        return ( 
          <div>   
                 // render the recipe
                 {this.recipe}
          </div>
        )
    }
}


// set the query 
const fetchRecipe = gql`
  query recipe($id: String!) { 
        recipe(id: $id){ 
      title 
      description
    }
  }
`;

// bind GraphQL to my component
export default graphql(fetchRecipe, 
        {options(ownProps) {
            return {
              variables: { id : ownProps.id} //ownProps.id allow to recuperate the Redux's id's state, to make the recipe query
            }
}})(Displayer); 

---

我想不出是怎么回事。如果有人有提示的话，那就太好了。

react中常见的一个滞后问题几乎总是因为您访问的是this.props而不是nextProps。如果你这样重写你的测试会怎么样：

if(nextProps.data.recipe) { 
    var {title, description} =    nextProps.data.recipe
    return this.recipe=  (
        <div className={style.dish_details} >
            <p> Title: {title}   </p>
            <p> Description: {description}  </p>
        </div>
    ) 
    // if there is no recipe data, just display a simple text
    }else{ 
    return this.recipe= <div>  Here details </div>
    }
 // if the values are similars don't rerender the component
}else {
    return false;
}

---

？

我的答案是：令人惊讶。