Question

我有一个全局变量

const initialProductState = {
   id: 0,
   name: '',
   price: 0,
   rating: 0
}

我正在使用它来设置“产品”组件中的状态为

state = {
     product : initialProductState
}

当我调用一个方法（addProduct）时，它使用initialState从另一个组件（ProductDetail）设置当前状态为初始状态，它意外地更新了initialProductState。我找不到此更新的原因。这是我的代码：

产品组件：

class Products extends Component {
constructor(props){
    super(props);
    this.state = {
        product: initialProductState,

    }
}
addProduct = (product) => {
    const newProduct = {
      ...product,
      id : this.state.totalProducts + 1,
    } 
    console.log(" initialProductState ", initialProductState)
    this.setState({
      products : newProductsArray,
      totalProducts : this.state.totalProducts + 1,
      product : initialProductState
     })

}
}
render(){
   return 
      <ProductDetail
            product={this.state.product}
            addProduct={this.addProduct}
            saveProduct={this.saveProduct}
            deleteProduct={this.deleteProduct}
            cancelProduct={this.cancelProduct}
        />
 }

ProductDetail组件：

class ProductDetail extends React.Component {
   state = {
    product: initialstate,
    priceError: "",
    nameError: "",
    ratingError: ""
  }
  static getDerivedStateFromProps(props, state) {
    console.log("inside getDerivedStateFromProps")
    if (props.product !== state.product) {
        return {
            product: props.product
        };
    }
    // Return null to indicate no change to state.
    return null;
  }
  render() {
     return (
        <Button
           variant="contained"
           color="primary"
           disabled = {!(this.props.product.id === 0)}
           onClick={() => {
               this.props.addProduct({
               name: 'random',
               price: 10,
               rating: 5
           })}
           }
        >
        Add
        </Button>
     )
 }
}

Answer 1

这是因为浅拷贝。深度克隆Deep clone

的最有效方法

更改代码。

constructor(props){
    super(props);
    this.state = {
        product: JSON.parse(JSON.stringify(initialProductState)),

    }
}

意外更新全局变量

1 个答案: