Почему обновление массива состояния в ReactJS не отображается в пользовательском интерфейсе моего дочернего компонента?

Вопрос или проблема

<div id='row-item-container'>
<p>Это отобразит табличную часть</p>
{ this.state.dataSource.length>0 && <div id='trxBox'>
    {this.state.dataSource.map(exp=>(
        <ExpenseEditableBlock data={exp} onDataChange={this.handleDataChange}
        key={exp.TrxID} 
        onExpSelect={this.selectThisExpItem}
        readonly={this.state.validationRenderer}
        validFlag={exp.ValidFlag}
        style={{marginBottom: '5px'}}/>
    ))}
</div>}

this.setState({dataSource: itemsParam});

import React, { Component } from "react";
import '../../CompCss/ExpenseEditableBlock.css';
import 'react-dropdown/style.css';
import { Utils } from './../Utils';

const utils = Utils();

class ExpenseEditableBlock extends Component {

    constructor(props){
        super(props);
        this.state = {
            expenseData: props.data,
            categoryArray: [],
            _otherVarName_ : null,
            checked: false
        }

       console.log('props ----->',props,'\nProps data:',this.state.expenseData);

        utils.expCategories().forEach((item) => {
            this.state.categoryArray.push(item.label);
        });
    }

  render() {
    return (
      <div className={(this.state.expenseData.ValidFlag === "FAIL")?"exp-block-box-one disabled-item":"exp-block-box-one"} style={this.props.style}>
        <div id="exp-item-head-section">
            <div className="display-inline-block">
                <p>Trx ID: {this.state.expenseData.TrxID}</p>
                <p>{this.state.expenseData.ValidFlag}</p>  /*ЭТО НЕ ОТРАЖАЕТ ЗНАЧЕНИЕ */
                <p>{this.props.validFlag}</p>  /*в то время как ЭТО ОТРАЖАЕТ ЗНАЧЕНИЕ */
            </div>
        </div>
        <div>
            <div className="exp-date-block">{this.state.expenseData.TrxDate}</div>
            <div>
                <p>{this.state.expenseData.TrxTitle}</p>
            </div>
        </div>

        <div style={{height: '3px'}}>
            {/* <TextField id="standard-basic" label="Standard" variant="standard" /> */}
        </div>
      </div>
    )
  }
}

export default ExpenseEditableBlock;

Ответ или решение

Обновление состояния массива dataSource в ReactJS может не отражаться в пользовательском интерфейсе дочернего компонента по нескольким причинам. Давайте детально разберемся в подтемах, связанных с этой проблемой, и предложим возможные решения.

Проблема с состоянием дочернего компонента

Ваша текущая реализация дочернего компонента ExpenseEditableBlock устанавливает состояние expenseData в конструкторе на основе переданных пропсов. В результате, когда вы обновляете dataSource в родительском компоненте и вызываете setState, дочерний компонент не получает обновленные данные, так как его состояние не синхронизировано с новыми пропсами.

constructor(props){
    super(props);
    this.state = {
        expenseData: props.data,
        // другие состояния
    }
}

Причина отсутствия ререндеринга

Когда пропсы передаются дочернему компоненту, React сравнивает новые и старые значения и решает, нужно ли ререндерить компонент. Если состояние дочернего компонента определяется только на основе его начальных значений, изменения в родительском компоненте не вызовут повторное обновление дочернего компонента, так как он не основан на изменениях в пропсах.

Путешествие данных в React

В React изменение состояния с помощью this.setState не гарантирует немедленного ререндеринга всех дочерних компонентов, если состояние дочерних компонентов зависит от их начального состояния, а не непосредственно от пропсов. Это означает, что, во избежание неполадок, вам необходимо синхронизировать состояние дочернего компонента с его пропсами с помощью метода жизненного цикла (например, componentDidUpdate) или использования хука useEffect, если вы пишете функциональные компоненты.

Способы решения проблемы

1. Управление состоянием через пропсы:
   Поддерживайте состояние expenseData в дочернем компоненте в актуальном состоянии, обращаясь к новым пропсам. В вашем случае это может выглядеть так:

   componentDidUpdate(prevProps) {
      if (prevProps.data !== this.props.data) {
          this.setState({ expenseData: this.props.data });
      }
   }

   Этот метод обновит состояние дочернего компонента, когда data пропса изменится, присваивая новое значение expenseData.

2. Прямое использование пропсов в рендере:
   Вместо хранения expenseData в состоянии дочернего компонента, вы можете использовать прямо this.props.data в методе render, что избавит вас от необходимости управлять состоянием:

   render() {
      const { data } = this.props;
      return (
          <div className={data.ValidFlag === "FAIL" ? "exp-block-box-one disabled-item" : "exp-block-box-one"}>
              {/* Ваши элементы здесь */}
              <p>{data.TrxID}</p>
              <p>{data.ValidFlag}</p>
          </div>
      );
   }

3. Использование React.memo:
   Если ваш дочерний компонент не зависит от состояния, вы можете использовать React.memo для оптимизации производительности, гарантируя, что ререндеринг будет происходить только тогда, когда изменяются пропсы.

Заключение

Проблема, которую вы описали, связана с тем, как управляется состояние в дочернем компоненте, и временем, когда это состояние обновляется. Решая её, вы сможете отобразить обновленные данные в интерфейсе вашего приложения. Понимание потоков данных в React, а также правильное распределение ответственности между родительскими и дочерними компонентами — ключевые точки, способствующие созданию отзывчивого и удобного пользовательского интерфейса, основанного на состоянии приложения.