Reactjs 引用其他状态属性的React JS状态

我希望有一个组件，其中包含产品列表和呈现每个产品的listItems列表，但它给了我一个错误：

TypeError: Cannot read property 'products' of undefined
new ProductList
src/components/products/ProductList.js:11

这是我的密码：

import React, { Component } from "react";
import productData from "./model";
import Product from "./Product"

class ProductList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      products: productData,
      listItems: this.state.products.map(product => (
        <Product key={product.name.toString()} product={product} />
      ))
    };
  }

  addProduct = (product) => {
    this.state.products.push(product);
    this.setState({
      products: this.state.products
    });
  };

  render() {
    return (
        <div>
        <ul>{this.state.listItems}</ul>
        <button onClick={e => this.addProduct({name: "some product", price: 54})}>Add Product</button>
      </div>
    );
  }
}

export default ProductList;

---

我做错了什么？

我想你想在初始化状态时映射

productsData

而不是

this.state

listItems: productsData.map(product => (
  <Product key={product.name.toString()} product={product} />
))

listItems:productsData.map（product=>(
))

您可能可以将listItems从状态移出，然后在render方法中重新创建它

render() {
  const listItems = this.state.products.map(product => (
    <Product key={product.name.toString()} product={product} />
  ))

  return (
    <div>
      <ul>{listItems}</ul>
      <button onClick={e => this.addProduct({name: "some product", price: 54})}>Add Product</button>
    </div>
  );
}

render（）{
const listItems=this.state.products.map（product=>(
))
返回(
{listItems}
this.addProduct（{name:“some product”，price:54}）}>Add product
);
}

或重新计算addProduct方法中的listItems状态-

addProduct = (product) => {
  const newProducts = this.state.products.concat(product)
  this.setState({
    products: newProducts,
    listItems: newProducts.map(product => (
      <Product key={product.name.toString()} product={product} />
    ))
  });
};

addProduct=（产品）=>{
const newProducts=this.state.products.concat（产品）
这是我的国家({
产品：新产品，
listItems:newProducts.map（产品=>(
))
});
};

在第一段代码中，您有：

this.state = {
  products: productData,
  listItems: this.state.products.map(product => (
    <Product key={product.name.toString()} product={product} />
  ))
};

this.state = {
  products: productData,
  listItems: this.products.map(product => (
    <Product key={product.name.toString()} product={product} />
  ))
};

对于

此.products

，是对实例ProductList上的products属性的引用，该实例也不存在

试着这样做：

import React, { Component } from "react";
import productData from "./model";
import Product from "./Product";

class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: productData
    };
  }

  addProduct = product => {
    const { products } = this.state;

    this.setState({
      products: [...products, product]
    });
  };

  render() {
    const { products } = this.state;

    return (
      <div>
        <ul>
          {products.map(product => (
            <Product key={product.name.toString()} product={product} />
          ))}
        </ul>
        <button
          onClick={e => this.addProduct({ name: "some product", price: 54 })}
        >
          Add Product
        </button>
      </div>
    );
  }
}

export default ProductList;

import React，{Component}来自“React”；
从“/model”导入productData；
从“/Product”导入产品；
类ProductList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：productData
};
}
addProduct=product=>{
const{products}=this.state；
这是我的国家({
产品：[……产品，产品]
});
};
render（）{
const{products}=this.state；
返回(

{products.map（product=>(
))}

this.addProduct（{名称：“某些产品”，价格：54}）}
>
添加产品
);
}
}
导出默认产品列表；

---

作为一般的经验法则，state应该为您的视图保存数据模型。我们生成的html，如

，应该是状态和道具的结果，并且应该存在于渲染函数中。

谢谢。这样做会导致显示的产品是静态的。它不会将新产品添加到state.listItems，因此不会显示新产品。您可以将listItems完全移出状态并在render方法中动态计算，也可以在addProduct中更改listItems状态method@MukeshSoni，您正在使用push直接改变

产品的状态。这不是一个好的做法。要么对产品进行浓缩，要么创建产品的深度拷贝，然后进行推送。为什么在这种情况下不做这件事呢？不要告诉我“不可变数据”或“函数式编程”。请具体说明。
this.state = {
  products: productData,
  listItems: this.state.products.map(product => (
    <Product key={product.name.toString()} product={product} />
  ))
};

this.state = {
  products: productData,
  listItems: this.products.map(product => (
    <Product key={product.name.toString()} product={product} />
  ))
};

import React, { Component } from "react";
import productData from "./model";
import Product from "./Product";

class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: productData
    };
  }

  addProduct = product => {
    const { products } = this.state;

    this.setState({
      products: [...products, product]
    });
  };

  render() {
    const { products } = this.state;

    return (
      <div>
        <ul>
          {products.map(product => (
            <Product key={product.name.toString()} product={product} />
          ))}
        </ul>
        <button
          onClick={e => this.addProduct({ name: "some product", price: 54 })}
        >
          Add Product
        </button>
      </div>
    );
  }
}

export default ProductList;