如何從重新渲染中將數據保留在反應組件中？

Question

我正在對 nodejs 服務器進行簡單的 axios 調用，以從 mongoose 架構 model 獲取產品。 當我第一次加載頁面時，我使用 componentDidMount 從 MongoDB 獲取現有產品。 但是，當我刷新頁面時，所有項目都消失了。

反應組件（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

如果您正在使用小型反應應用程序（沒有 redux），那么您必須使用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>
    );
  }
}