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中的。因此，如果您通过push（）或pop（）方法更改任何数组，则对该数组的引用不会更改，React无法区分您的数组中的任何更改（以重新呈现组件）。

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

也考虑渲染数组元素，您需要使用key prop，因此React可以正确渲染您的组件。可以找到更多信息here。