Question

我想在每次更新时将this.state.products数组添加到本地存储中。但是，由于useEffect仅在具有状态的组件外部起作用，因此它不接受状态值。

const products = this.state.products;
useEffect (() => {
  localStorage.setItem("products", JSON.stringify(this.state.products));
}, []);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
            redirect: false,
            name: "", 
            ean: "", 
            type: "", 
            weight: "", 
            color: "", 
            active: false,
            products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false}, 
            {name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false}, 
            {name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false}, 
            {name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false}, 
            {name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
    };
};

Answer 1

您所做的是错误的，您不能同时拥有类组件和功能组件，如果您想通过redux提前保留数据，则可以使用redux-persist，但是对于在这种情况下，您需要具有以下功能组件：


function App(props) {

   const [products, setProducts] = useState([WHAT_EVER_PRODUCT_DATA])

   // ...some other logic you wrote


   useEffect(() => {

      localStorage.setItem("products", JSON.stringify(products));

   }, [products])


   // ... rest of the code


}

此useEffect将在每次更改产品后运行，因为它取决于products，如果要在每次状态更改时运行它，则可以跳过其中的[products]您的useEffect，但不建议这样做！

Answer 2

如果您要访问的组件状态无法访问this.state.products。如果要将App用作类组件，则可以导入使用useState的功能组件，并在App的状态更新时更新该子组件。

App.js

import React, {useState} from 'react';
import ChildComponent from './ChildComponent';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
            redirect: false,
            name: "", 
            ean: "", 
            type: "", 
            weight: "", 
            color: "", 
            active: false,
            products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false}, 
            {name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false}, 
            {name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false}, 
            {name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false}, 
            {name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
    };
};

   render(){
      return(<div><ChildComponent products={this.state.products}/></div>
   }

}

ChildComponent.js

import React, {useState} from 'react';

const ChildComponent = ({products})=>{

   const [myProducts, setProducts] = useState([]);

   useEffect (() => {
      localStorage.setItem("myProducts",JSON.stringify(products));
   }, []);

   return(<div>
        RENDER PRODUCTS
   </div>)

}

Answer 3

useEffect旨在用于React的功能组件中。如果要在类组件中执行此操作，建议您采用以下方式：

创建一个更新产品的新功能：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
            redirect: false,
            name: "", 
            ean: "", 
            type: "", 
            weight: "", 
            color: "", 
            active: false,
            products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false}, 
            {name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false}, 
            {name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false}, 
            {name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false}, 
            {name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
    };

  // Use this function to update products 
  updateProducts(products) {
    // Save to localstorage
    // use the this.setState() to update the products
    this.setState(products);
  }
};

每次状态变化时都会反应useEffect

3 个答案: