导出数组ReactJS-错误：数组是只读的

Question

我正在尝试将带有React的变量导出到另一个文件。

我有一个数组，我想在多个文件中使用。 在一个文件中，应在按下按钮后将其清空。

myArray.js

export var myArray = [];

app.js

import {myArray} from './myArray.js';
function resetArray(){
  myArray = [];
}

Webpack出现以下错误：

./app.js模块构建失败：语法错误：“ myArray”是只读的

我怎样才能使它不是只读的而是可调的？

谢谢！

Answer 1

您应该在这里考虑其他方法。 本质上，您是在违背使React工作的单向数据流原理。

您应该重新设计它，以便在您的主要React组件中将此数组设置为state。 然后将该数组作为道具传递给需要访问该数组的子组件。

然后，如果您希望子组件更改数组，则需要向下传递一个名为updateMyArray类的updateMyArray ，然后该组件在顶部组件上调用该函数。

像这样：

class MainComponent extends React.Component {
  state = {
    myArray: ['a','b','c']
  }

  updateMyArray(newArray) {
    this.setState({myArray: newArray})
  }

  render() {
    return (<div>
        <ChildComponent updateArray={this.updateMyArray} myArray={this.state.myArray} />
      </div>
    )
  }
}

然后，在子组件中，您可以在适当的时候调用this.props.updateMyArray(someNewArray) ，它将从顶部重新渲染，并将新数组向下传递到props中的子组件。