Question

我正在对nodejs服务器进行简单的axios调用，以响应从猫鼬模式模型中获取产品。首次加载页面时，我使用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

如果您正在使用小型React应用程序（没有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>
    );
  }
}

如何在重新渲染的react组件中保留数据？

2 个答案: