ReactJS: дочерний компонент не обновляется, даже если я передаю разные значения

Question

Я новичок в React.

Мой дочерний компонент (SmithchartSeriesDirective) успешно отображает данные, переданные с сервера, когда родительский компонент (SimplePanel) загружается в первый раз. При последующих вызовах данные, полученные с сервера, изменяются, они отражаются в подпорках, но как только я связываю эти данные с дочерним компонентом, он не отражает обновленные данные в компоненте.

Я привязка данных в массиве listResult .

Ниже представлен родительский компонент SimplePanel

export class SimplePanel extends Component<Props> {

  render() {
    var reactance: number[] = [];
    var resistance: number[] = [];
     this.props.data.series.map((anObjectMapped, index) => {
       if(index==0)
       {
         reactance = anObjectMapped.fields[0].values.toArray();
       }
      else
      {
         resistance = anObjectMapped.fields[0].values.toArray();
      }
  });
   var resultArr = 
   {
    resistance:0,
    reactance:0
   };

   let listResult =[];
    for (let index = 0; index < resistance.length; index++) {
      var newObj = Object.create(resultArr);
      newObj.resistance = Number(resistance[index]);
      newObj.reactance=reactance[index];
      listResult.push(newObj);
    }
    return (<div className='control-pane' style={{  height:'100%', width:'100%', backgroundColor:'#161719' }} >
            <div className='col-md-12 control-section' style={{  height:'100%', width:'100%' }}>
                <SmithchartComponent  id='smith-chart' theme="MaterialDark" legendSettings={{ visible: true, shape: 'Circle' }}>
                    <Inject services={[SmithchartLegend, TooltipRender]}/>
                    <SmithchartSeriesCollectionDirective>
                        <SmithchartSeriesDirective 
                            points= {listResult}
                            enableAnimation={true}
                            tooltip={{ visible: true }}
                            marker={{ shape: 'Circle', visible: true, border: { width: 2 } }}

                        >
                        </SmithchartSeriesDirective>
                        </SmithchartSeriesCollectionDirective>
                </SmithchartComponent>
            </div>
    </div>);

Answer 1

добро пожаловать в переполнение стека.

Сначала запомните, что массивы сохраняются по ссылке в JavaScript. Поэтому, если вы измените какой-либо массив с помощью методов pu sh () или pop (), ссылка на этот массив не изменится, и React не сможет различить guish любое изменение в вашем массиве (для повторного рендеринга вашего компонент).

let a = [2];
let b = a;
b.push(4);
a == b; //a is [2] and b is [2,4] but the result is true.

Вы можете использовать этот подход в качестве решения этой проблемы:

let listResult = [...oldListResult, newObj]; // ES6 spread operator

Также рассмотрите для рендеринга элементов массива, вам нужно использовать ключ prop, поэтому React может правильно визуализировать ваши компоненты. больше информации можно найти здесь .