Reactjs 每次状态更改时都会对useEffect作出反应

每次更新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}, ]
    };
};

---

您所做的是错误的，您不能同时拥有类组件和函数组件，如果您想使用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


}

---

此

useffect

将在每次更改产品后运行，因为它取决于

products

，如果您想在每次状态更改时运行它，您可以跳过

useffect

的

[products]

，但不建议这样做

如果您试图访问的组件状态为

此.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>
   }

}

import React, {useState} from 'react';

const ChildComponent = ({products})=>{

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

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

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

}

import React，{useState}来自“React”；
从“/ChildComponent”导入ChildComponent；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
重定向：false，
姓名：“，
ean:“，
类型：“，
重量：“，
颜色：“，
活动：错误，
产品：[{名称：“白菜”，ean:“00000000”，类型：“蔬菜”，重量：“2kg”，颜色：“绿色”，活性：假}，
{名称：“香蕉”，ean:“111111111”，类型：“水果”，重量：“0.3kg”，颜色：“黄色”，活性：假}，
{名称：“巧克力”，ean：“22222”，类型：“糖果”，重量：“0.2kg”，颜色：“棕色”，活性：假}，
{名称：“橙色”，ean：“3333”，类型：“果实”，重量：“0.5kg”，颜色：“橙色”，活性：假}，
{名称：“黄瓜”，ean：“4444”，类型：“蔬菜”，重量：“1kg”，颜色：“绿色”，活性：假}，]
};
};
render（）{
返回(
}
}

ChildComponent.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>
   }

}

import React, {useState} from 'react';

const ChildComponent = ({products})=>{

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

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

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

}

import React，{useState}来自“React”；
const ChildComponent=（{products}）=>{
const[myProducts，setProducts]=useState（[]）；
useffect（（）=>{
setItem（“myProducts”，JSON.stringify（products））；
}, []);
返回(
渲染产品
)
}

useffect

旨在用于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);
  }
};

---

正在实现的

useState

在哪里？它似乎不在组件内部。。