Почему эти строки таблицы не перерисовываются в React, когда переменная с состоянием, на которой они основаны, обновляется?

Question

У меня есть приложение реагирования, которое имеет следующую структуру компонентов:

App.Js
 Dashboard.js

  Component1.js
    Child1.js
     Subchild1.js
       SubSubChild1.js
       SubSubChild2.js

  Component2.js
    Child1.js
     SubChild1.js

Компонент Dashboard вызывает и Component1, и Component2, Component1. js, затем вызывает Child1. js, который вызывает SubChild1. js et c.

Компонент Child1. js компонента 2:

App.Js
 Dashboard.js

  Component1.js
    Child1.js
     Subchild1.js
       SubSubChild1.js
       SubSubChild2.js

  Component2.js
--> Child1.js
     SubChild1.js

Визуализирует таблицу, используя следующий код:

  ... return (

          <div className="table-responsive">
            <table
              id="example"
              data-page-length='4' //https://www.datatables.net/manual/options
              className="table table-bordered table-hover display nowrap margin-top-10 w-p100"
            >
              <thead>
                <tr>
                  <th>Heading 1</th>
                  <th>Heading 2</th>
                </tr>
              </thead>
              <tbody>


                    {props.myStateVariable.map(userWallet => (
                      <SubChild1
                        key={userWallet.id}
                        id={userWallet.id}
                        coin={userWallet.coin}
                        balance={userWallet.balance}
                        loadedWallets={props.loadedWallets}
                      />
                   ...

Изначально таблица отлично выглядит , Вот код, который отображает строки таблицы в SubChild1. js:

import React from "react";

const SubChild1 = props => {


  return (
    <tr>
      <td>{props.coin}</td>
      <td>{props.balance.toFixed(8)}</td>
    </tr>

  );
};

export default SubChild1;

myStateVariable, определяется в приложении. js следующим образом:

const [myStateVariable, setMyStateVariable] = useState(myInitialData);

Теперь, когда я обновляю myStateVariable из SubSubChild2. js:

App.Js
 Dashboard.js

  Component1.js
    Child1.js
     Subchild1.js
       SubSubChild1.js
   --> SubSubChild2.js

  Component2.js
    Child1.js
     Subchild1.js

Вызывая функцию, переданную в качестве подпорки из SubChild1 в SubSubChild2, которая выполняет следующее:

 props.setMyStateVariable(myNewData);

Данные в таблице, отображаемой SubChild1. js в Component2. Js:

App.Js
 Dashboard.js

  Component1.js
    Child1.js
     Subchild1.js
       SubSubChild1.js
       SubSubChild2.js

  Component2.js
    Child1.js
  --> SubChild1.js

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

Когда я это делаю, таблица обновляется нормально. Проблема в том, что мне нужно обновить таблицу, как только myStateVariable будет обновлено из SubSubChild2. js, а не только после того, как я уйду от и обратно к маршруту, который вызывает компонент Dashboard. js.

Редактировать: таким образом переменная состояния и функция обновления передаются из реквизита.

Фактическое обновление переменной состояния запускается, когда SubSubChild2. js вызывает функцию, которая была передана ему в качестве подпорки из SubChild1. js:

С самого начала ...

В приложении. Js состояние var определяется с помощью:

const [myStateVariable, setMyStateVariable] = useState(myInitialData);

App. JS, затем вызывает Dashboard. js:

 <Dashboard          
     myStateVariable={myStateVariable}
     setMyStateVariable={setMyStateVariable}
 />

Dashboard. js вызывает Component1. js и Component2 . js, следующим образом:

   <Component1 {...props}/>
   <Component2 {...props}/>

Component1. js вызывает Child1. js следующим образом:

<Child1 {...props}/>

Child1 вызывает SubChild1. js следующим образом :

<SubChild1
    myStateVariable={props.myStateVariable}
    setMyStateVariable={props.setMyStateVariable}
 />

SubChild1 вызывает SubSubChild2 со следующим кодом:

return (
        <div>
        {showButton === true ? <SubSubChild1/> : null}
        {showResult === true ? <SubSubChild2 updateTableData={updateTableData}/> : null}
        </div>
    )

updateTableData() - это функция в SubChild1, которая передается в качестве подпорки SubSubChild2.

const updateTableData = () => {
 updateSteps(myNewData);
}

updateSteps() также находится в SubChild1 и фактически выполняет функцию установленного состояния:

const updateSteps = (myNewData) => {
   props.setMyStateVariable(myNewData);
}

В SubSubChild2 это фактическое изменение состояния инициируется с помощью props.updateTableData()

Answer 1

Возможно, новые данные все еще манипулируют тем же инициализированным объектом?

Например, если вы добавляете / удаляете значения из массива, вам нужно создать новый объект, чтобы инициировать изменение состояния. например,

const data = [...myNewData];
props.setMyStateVariable(data);

вместо этого

myNewData.push(dataObj)
props.setMyStateVariable(myNewData);

Ср. этот ТАК вопрос ;

Answer 2

Я бы сказал, что вы передаете функцию-обработчик от <Dashboard/> до <SubSubChild2/> и вызываете ее для обновления состояния в компоненте <Dashboard/>, так как он является ближайшим родителем для <SubSubChild2/> и <SubChild1/> из * 1006. *. Затем обновленное состояние должно быть передано как реквизиты для Component2, а затем SubChild1.

метод render () в <Dashboard/>:

return (
   <Component1 handleChange={this.handleChange}/>

   <Component2 stateName={this.state.stateValue} />
)