使用componentWillReceiveProps重新渲染组件？

Question

I have a .jsx with a parent class and a child, in the parent i initialize the api and stock the json content in a state:

constructor(props) {
    super(props);
    this.state = {
        all: '',
    };
}

componentDidMount() {
    this.loadApi();
}

loadApi(){
    this.setState({ all: myApiGet('https://********') });
}

After that i need to get the "url" of the differents pics for show them on the site. But there is the problem, I get the api json when i load the page and i don't success to re-load the function.

componentWillReceiveProps(nextProps) {
    this.apiGetProductPicture(nextProps.categorie);
}

apiGetProductPicture = (i) => () => {
        // TODO do something with the data
    var stock = this.props.all
        .then(stock => this.setState({ pictures: stock.content.categories[i].background }))

        .catch(error => console.log('home2', error));
}

I try a lot of possibility and check the net but the solution doesn't work for me (or i just doesn't understand them ...)

Thanks for your time :/

Full component:

class ProductItem extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        pictures: '',
        name: '',
        price: '',
        json: '',
    };
    //this.apiGetProductPicture = this.apiGetProductPicture.bind(this);
}

componentWillReceiveProps(nextProps) {
    this.apiGetProductPicture(nextProps.categorie);
}

apiGetProductPicture = (i) => () => {
        // TODO do something with the data
    var stock = this.props.all
        .then(stock => this.setState({ pictures: stock.content.categories[i].background }))

        .catch(error => console.log('home2', error));
}


render() {
    return (
             ......
           )
          }
}

Error message:

The above error occurred in the component: in ProductItem (created by Home2) in div (created by Home2) in div (created by Home2) in div (created by Home2) in div (created by Home2) in main (created by Home2) in Home2

Consider adding an error boundary to your tree to customize error handling behavior. You can learn more about error boundaries at https:// fb.me/react-error-boundaries. react-dom.development.js:9312:5 ReferenceError: props is not defined

Answer 1

Ok i think i see some changes to be made in your parent component your setting this.state.all to be a promise (the promise returned from your api call)

let's change that to be the actual json from your api call

Parent component:

constructor(props) {
    super(props);
    this.state = {
        all: '',
    };

    this.loadApi = this.loadApi.bind(this);
}

componentDidMount() {
    this.loadApi();
}

loadApi() {
    myApiGet('https://********')
        .then(all => this.setState({ all }));
}

Child Component:

class ProductItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            pictures: '',
            name: '',
            price: '',
            json: '',
        };
        this.apiGetProductPicture = this.apiGetProductPicture.bind(this);
    }

    ComponetDidMount() {
         apiGetProductPicture(this.props.categorie);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.categorie !== this.props.categorie)
        {
            this.apiGetProductPicture(nextProps.categorie);
        }
    }

    apiGetProductPicture(categorie) {
        // TODO do something with the data
        if (!this.props.all) return;
        var categories = (((this.props.all || {}).stock || {}).content || {}).categories;

        if (categories.indexOf(categorie) > -1)
        {
            this.setState({ pictures: categories[categorie].background }));
        }

    }

    render() {
        return (
             ......
        );
    }
}

Thanks for your time :/

no worries :)

Answer 2

i se you posted "Lost in the javascriptception" this and other questions have provided me with enough info to solve your problem, sorry the stackoverflow community was so mean to you, but not all of us are like that.

I would recommend in the future you post more info on your questions, like full code (except sensible stuff), not just parts, the codesanbox was the thing that let me test code and see where the problem was.

Also if*** up on some of the previous answer, but to be fair i had very limited info to go along with, and most people answering won't test the code for tipos or stuff

version One

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class ProductItem extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      pictures: '',
      name: '',
      price: '',
      json: '',
    };

    this.apiGetProductPicture = this.apiGetProductPicture.bind(this);
  }

  componentDidMount() {
    this.apiGetProductPicture(this.props.categorie);
  }

  componentWillReceiveProps(nextProps) {
      this.apiGetProductPicture(nextProps.categorie);
  }

  apiGetProductPicture(categorie) {
    // TODO do something with the data
    var categories = this.props.send;
    categorie = parseInt(categorie, 10);

    if (categorie < categories.length) {
      console.log(categories[categorie].background);
      this.setState({ pictures: categories[categorie].background });
    }

  }

  render() {
    return (
      <div>
        <p>{this.props.name}</p>
        <img src={this.state.pictures} />
      </div>
        );
  }
}


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      all: "",
      categories: []
    };
    this.loadAPI = this.loadAPI.bind(this);
  }

  componentDidMount() {
    this.loadAPI();
  }

  loadAPI() {

    var test = fetch("https:*******")
      .then(test => test.json())
      .then(testJson => {
        //  alert(testJson.content.categories[0].description)
        var obs = testJson.content.categories.slice();

        // alert(testJson);
        this.setState({ categories: obs });
      });
  }

  render() {
    return (
      <div style={styles}>
        <Hello name="CodeSandbox" />
        <h1>Products</h1>
        {this.state.categories.map( (value, i) => {
          return <ProductItem
                key={value.uid}
                send={this.state.categories}
                name={value.description}
                categorie={i} />
        })}
        <h2>Start editing to see some magic happen {"\u2728"}</h2>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

My recommended Version

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class ProductItem extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.name}</p>
        <img src={this.props.picture} />
      </div>
        );
  }
}


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      all: "",
      categories: []
    };
    this.loadAPI = this.loadAPI.bind(this);
  }

  componentDidMount() {
    this.loadAPI();
  }

  loadAPI() {

    var test = fetch("https:*****")
      .then(test => test.json())
      .then(testJson => {
        //  alert(testJson.content.categories[0].description)
        var obs = testJson.content.categories.slice();

        // alert(testJson);
        this.setState({ categories: obs });
      });
  }

  render() {
    return (
      <div style={styles}>
        <Hello name="CodeSandbox" />
        <h1>Products</h1>
        {this.state.categories.map( (value, i) => {
          return <ProductItem
                key={value.uid}
                picture={value.background}
                name={value.description}
                categorie={i} />
        })}
        <h2>Start editing to see some magic happen {"\u2728"}</h2>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Hope this helps you out, don't be so hard on yourself, you know practice makes perfect, also would recommend you follow the react tutorial , to see what react is about, i can seam super hard and weird because it maybe a completely different programming model (it was for me), but when it click it's really cool