Реакция setState внутри componentDidUpdare приводит к превышению максимальной глубины обновления

Я думаю, вам нужно передать prevProps и/или prevState в качестве параметра (ов) componentDidUpdate и выполнить код, только если реквизит или свойство состояния изменилось,

Пример:

componentDidUpdate(prevProps, prevState) {
  // if the property count of the state has changed
  if (prevState.count !== this.state.count) {
    // then do your code
  }
}

Документы: https://en.reactjs.org/docs/react-component.html#componentdidupdate

кажется, вы хотите изменить состояние при изменении реквизита для фильтрации некоторых продуктов. Я удаляю код componentDidUpdate и добавляю в компонент метод для фильтрации, и я вызываю этот метод из родительского компонента.

class MyComponent extends Component {
constructor(props) {
    super(props);
    this.state = {
        matchtedProducts: [],
        products: [],
    }
}
async componentDidMount() {
    try {
        const products = await getProducts()
        this.setState({ products })
    } catch(err) {
        console.info(err)
    }
}

updateMatches = () => {

    const productColor = this.props.size.trim().toLowerCase()
    const productSize = this.props.color.trim().toLowerCase()
    const matches = []

    this.state.products.map(product => {
        const title = product.title
        const titleSpliitet = title.split(',')

        let color = titleSpliitet[1].trim().toLowerCase()
        let size = titleSpliitet[2].trim().toLowerCase()

        if (color == productColor && size == productSize) {
            matches.push(product)
        }

    })
    this.setState({matchtedProducts: matches})

}

render() {
    return (<div></div>)
}

}

и в родительском компоненте

changeSizeAndColor = () => {
     //note that I called updateMatches of MyComponent  
     this.setState({color : ... , size : ...} , () => this.myComponent.updateMatches());
}

render() { 
    return <MyComponent ref = {ref => this.myComponent = ref} color = {...} size = {...}/>
}

Это происходит потому, что каждый setState запускает рендеринг, а затем снова компонентDidMount, что в основном вызывает бесконечный цикл. И чтобы остановить этот цикл, вам нужно установить некоторые условия, чтобы предотвратить повторный рендеринг, например

    componentDidUpdate(previousProps, previousState) {
    if (previousProps.data !== this.props.data) {
        this.setState({/*....*/})
    }
   }

Я получил ту же ошибку. В методе использования эффекта я извлек данные из бэкэнда с помощью axios и обновил состояния. Но перед обновлением состояний я не преобразовал данные json в тип данных состояния, поэтому это привело к этой ошибке.

Неверный код :

Useeffect(() => {
    fetch
       .then((res) =>{
           setDate(res.data.date)
       }) 
})

Правильный код:

Useeffect(() => {
    fetch
        .then((res) =>{
            setDate(new Date(res.data.date)) 
    }) 
})