Как сохранить данные в реагирующем компоненте от повторного рендеринга?

Question

Я делаю простой аксиос-вызов серверу nodejs, чтобы реагировать на выборку продуктов из модели схемы mongoose. Когда я впервые загружаю страницу, я использовал componentDidMount для извлечения существующих продуктов из MongoDB. Однако когда я обновляю страницу, все элементы исчезают.

React Component (componentDidMount):

class Product extends Component {
  constructor(props) {
    super(props);
    this.state = { products: '' };
  }

componentDidMount() {

  axios.get('http://localhost:3001/getProduct')
    .then(res => {
       this.setState({ products: res.data });
      }).catch((err) => {
        console.log(err);
      });
  }

Сервер Nodejs (/ getProduct api):

app.get('/getProduct', (req,res) => {

   Products.find(product_id), (err, products) => {
       if(err) throw err;
       res.status(200).send(products);
   });
}

Я полагаю, это как-то связано с обратными вызовами? Пожалуйста, помогите, я новичок, чтобы реагировать.

Answer 1

Если вы работаете с небольшим реактивным приложением (без избыточности), вам придется использовать localStorage или sessionStorage для сохранения данных. Посмотрите на приведенный ниже пример.

class Product extends Component {
  constructor(props) {
    super(props);
    // get product list from localstorage
    this.state = { products: localStorage.getItem('productList') ? JSON.parse(localStorage.getItem('productList')) : [] };
  }

componentDidMount() {
  axios.get('http://localhost:3001/getProduct')
    .then(res => {
       this.setState({ products: res.data }, ()=>{
            // set product list in localstorage
            localStorage.setItem('productList', JSON.stringify(res.data));
         });
      }).catch((err) => {
        console.log(err);
      });
}

Answer 2

class Product extends React.Component {
  constructor(props) {
    super(props);
    // get product list from localstorage
    this.state = {
      products: JSON.parse(localStorage.getItem("products")) || []
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:3001/getProduct") // https://jsonplaceholder.typicode.com/posts
      .then(res => {
        this.setState({ products: res.data }, () => {
          // set product list in localstorage
          localStorage.setItem("products", JSON.stringify(res.data));
        });
      })
      .catch(err => {
        console.log(err);
      });
  }
  render() {
    const { products } = this.state;
    return (
      <div>
        {products
          ? products.map(product => <div key={product.id}>{product.title}</div>)
          : null}
      </div>
    );
  }
}