Reactjs 受其他组件影响的组件'；什么道具？

很奇怪，我有这样的情况：

<Grid className="App">
    <GridRow columns={1}>
      <GridColumn>
        <StatsHeader graphData={this.state.graphData} />
      </GridColumn>
    </GridRow>
    <GridRow columns={2}>
      <GridColumn>
        <LineChart graphData={this.state.graphData != null ? this.computeDiffs(this.state.graphData) : null} />
      </GridColumn>
      <GridColumn>
        <BarChart graphData={this.state.graphData} />
      </GridColumn>
    </GridRow>
  </Grid>

第二个图形因找不到某些值而中断。

---

为什么？这就像第一个数组的道具影响第二个数组一样。

数组默认情况下通过引用分配/复制，这意味着如果将数组分配给新变量并更改该变量的值，则原始数组也将更改：

var arr1 = [1, 2]
var arr2 = arr1

arr2[0] = 2

console.log(arr1)
[2, 2]

有几种方法可以仅通过数组的值复制数组：

您可以执行

slice

var arr1 = [1, 2]
var arr2 = arr1.slice(0)

arr2[0] = 2

console.log(arr1)
[1, 2]

因此，在您的情况下，可以先复制值：

let data = this.props.graphData.slice(0);
let last20 = data.splice(-20);

---

您可以看到更多信息

JS中的赋值操作不会进行任何复制，永远不会

是一个可变操作-它将变异唯一可通过指向此1数组的所有变量访问的数组，并返回一个新数组

使用将不会修改原始数组，只返回一个新数组：

let last20 = data.slice(-20)

---

---

我建议建立一个好的心理模型，来说明什么是“值”、“变量”和“赋值”。

@keikai没有复制，不管是肤浅的还是其他的。即使一个重现问题的在线示例在一般情况下是有用的，在这里，问题很容易识别，而不需要它，直到…它在

a=[]；b=a

只有一个数组对象，没有任何副本，两个变量指向同一个对象…确实非常混乱，但是..用slice复制它就成功了：）难道没有更精确的方法来传递数据作为道具，并确保它不能被修改吗？@Phate你可以使用或其他语言编译到JS，比如

let last20 = data.slice(-20)