如何通过重新渲染将数据保存在反应组件中？

Question

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

如何通过重新渲染将数据保存在反应组件中？

How to persist data in react component from re-render?

callback

node.js

reactjs

axios

react-component