Reactjs 反应生命周期方法-筛选的正确方法

我是新来的。我有一个产品页面组件，它是一个显示特定产品的页面。我试图做的是，这个ProductPage在产品中找到特定的产品（这是一个存储为道具的对象数组），并在渲染之前将其保存为状态

我犯了这些错误。我无法从阵列中筛选出单个产品

1) currentProduct is not defined.
2)Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我应该使用哪种生命周期方法来解决此问题？我很困惑。有人能给我解释一下吗

在我的ProductPage.js中

import React, { Component } from 'react';
import { connect } from 'react-redux';

class ProductPage extends Component {
    constructor(props) {
        super(props)

        this.state = {
            product: [],
            productId: this.props.match.params._id,
        }

      this.productsFiltering = this.productsFiltering.bind(this);
    }

    // update the state so that a product can be rendered
    componentDidUpdate() {
        const currentProduct = this.productsFiltering(this.state.productId);
        this.setState({
            product: currentProduct,
        })
    }
    
    // find a product based on the Id 
    // pass the _id from url to find out the single product
    productsFiltering = (productId) => {
        const productArray = this.props.products;
        return productArray.find(product => product._id === productId)
    }

    render() {
        // error
        const {name, price, description} = product; 
        return (
            <div>
                <span>{product.name}</span>
                <span>{product.price}</span>
                <span>{product.description}</span>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    products: state.productsContainer,
});


export default connect(
    mapStateToProps,
)(ProductPage);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
类ProductPage扩展组件{
建造师（道具）{
超级（道具）
此.state={
产品：[]，
productId:this.props.match.params.\u id，
}
this.productsFiltering=this.productsFiltering.bind（this）；
}
//更新状态以便可以呈现产品
componentDidUpdate（）{
const currentProduct=this.productsFiltering（this.state.productId）；
这是我的国家({
产品：当前产品，
})
}
//根据Id查找产品
//从url传递_id以查找单个产品
productsFiltering=（productId）=>{
const productArray=this.props.products；
返回productArray.find（product=>product.\u id==productId）
}
render（）{
//错误
const{name，price，description}=产品；
返回(
{product.name}
{产品价格}
{product.description}
)
}
}
常量mapStateToProps=（状态）=>({
产品：state.productsContainer，
});
导出默认连接(
MapStateTops，
)（产品页）；

如果将代码更改为以下格式，则可以删除这两个错误：

class ProductPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      product: []
    };

    this.productsFiltering = this.productsFiltering.bind(this);
  }

  // update the state so that a product can be rendered
  componentDidUpdate() {
    const productId = this.props.match.params._id;
    if (productId && this.state.product._id != productId) {
      const currentProduct = this.productsFiltering(productId);

      if (currentProduct) {
        this.setState({
          product: currentProduct
        });
      }
    }
  }

  // find a product based on the Id
  // pass the _id from url to find out the single product
  productsFiltering = (productId) => {
    const productArray = this.props.products;
    if(productArray.length){
      return productArray.find((product) => products._id === productId);
    }
  };

  render() {
    const { name, price, description } = this.state.product || {};
    return (
      <div>
        <span>{product.name}</span>
        <span>{product.price}</span>
        <span>{product.description}</span>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  products: state.productsContainer
});

export default connect(mapStateToProps)(ProductPage);

类ProductPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]
};
this.productsFiltering=this.productsFiltering.bind（this）；
}
//更新状态以便可以呈现产品
componentDidUpdate（）{
const productId=this.props.match.params.\u id；
if（productId&&this.state.product.\u id！=productId）{
const currentProduct=this.productsFiltering（productId）；
if（当前产品）{
这是我的国家({
产品：currentProduct
});
}
}
}
//根据Id查找产品
//从url传递_id以查找单个产品
productsFiltering=（productId）=>{
const productArray=this.props.products；
if（productArray.length）{
返回productArray.find（（product）=>products.\u id==productId）；
}
};
render（）{
const{name，price，description}=this.state.product | |{}；
返回(
{product.name}
{产品价格}
{product.description}
);
}
}
常量mapStateToProps=（状态）=>({
产品：state.productsContainer
});
导出默认连接（MapStateTops）（ProductPage）；

--始终检查未定义或空属性

--如果新状态不断变化，请勿在componentDidMount中使用setState

---

--避免使用直接从

道具驱动的
状态
，因为这是一种不好的做法，您可能会得到
陈旧道具
如果将代码更改为以下内容，您可以删除这两个错误：

class ProductPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      product: []
    };

    this.productsFiltering = this.productsFiltering.bind(this);
  }

  // update the state so that a product can be rendered
  componentDidUpdate() {
    const productId = this.props.match.params._id;
    if (productId && this.state.product._id != productId) {
      const currentProduct = this.productsFiltering(productId);

      if (currentProduct) {
        this.setState({
          product: currentProduct
        });
      }
    }
  }

  // find a product based on the Id
  // pass the _id from url to find out the single product
  productsFiltering = (productId) => {
    const productArray = this.props.products;
    if(productArray.length){
      return productArray.find((product) => products._id === productId);
    }
  };

  render() {
    const { name, price, description } = this.state.product || {};
    return (
      <div>
        <span>{product.name}</span>
        <span>{product.price}</span>
        <span>{product.description}</span>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  products: state.productsContainer
});

export default connect(mapStateToProps)(ProductPage);

类ProductPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]
};
this.productsFiltering=this.productsFiltering.bind（this）；
}
//更新状态以便可以呈现产品
componentDidUpdate（）{
const productId=this.props.match.params.\u id；
if（productId&&this.state.product.\u id！=productId）{
const currentProduct=this.productsFiltering（productId）；
if（当前产品）{
这是我的国家({
产品：currentProduct
});
}
}
}
//根据Id查找产品
//从url传递_id以查找单个产品
productsFiltering=（productId）=>{
const productArray=this.props.products；
if（productArray.length）{
返回productArray.find（（product）=>products.\u id==productId）；
}
};
render（）{
const{name，price，description}=this.state.product | |{}；
返回(
{product.name}
{产品价格}
{product.description}
);
}
}
常量mapStateToProps=（状态）=>({
产品：state.productsContainer
});
导出默认连接（MapStateTops）（ProductPage）；

--始终检查未定义或空属性

--如果新状态不断变化，请勿在componentDidMount中使用setState

--避免使用直接从
props
驱动的
状态
，因为这是一种不好的做法，您可能会得到
过时的props
根本问题是您正在将props复制到状态，而无需这样做

ProductPage显示一个产品并且不更改，因此不需要状态。只需抓取匹配的产品并将其存储在变量中，然后进行渲染。不需要
setState（）
。
根本问题是您正在将道具复制到状态，而无需执行此操作

ProductPage显示一个产品并且不更改，因此不需要状态。只需抓取匹配的产品并将其存储在变量中，然后进行渲染。不需要
setState（）
。
我想您在
productsFiltering
中有一个输入错误-看起来应该是
productArray.find（product=>product.\u id==productId）
。根本问题是您正在将道具复制到state，而不需要这样做<代码>产品页面

显示一个产品并且不改变，因此不需要状态。只需抓取匹配的产品并将其存储在变量中，然后进行渲染。不需要

setState（）

。@MrCode谢谢您的帮助