如何在点击时实时更新我的组件？

Question

我正在研究 ReactJS、Redux 和 GraphQL 堆栈的 ReactJS 组件 A。

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

我的困难是，当我点击图像时，我的 ReactJS 渲染落后了一步。从技术上讲，是更新的 GraphQL 状态。

如何使渲染与点击图片同时触发查询？

这是我的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);

我不知道哪里出了问题。如果有人有提示，那就太好了。

Answer 1

React 中常见的 "one step behind issue" 几乎总是因为你访问的是 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;
}

?

如何在点击时实时更新我的组件？

How can I update my component in real time when clicking?

javascript

apollo

reactjs

graphql

apollo-client

如何在点击时实时更新我的​​组件？

How can I update my component in real time when clicking?

javascript

apollo

reactjs

graphql

apollo-client

如何在点击时实时更新我的组件？