javascript - 导出数组 ReactJS - 错误 : array is read-only

Question

我正在尝试使用 React 将变量导出到另一个文件。

我有一个数组，我想在多个文件中使用它。在一个文件中，当按下按钮时，它应该被清空。

myArray.js

export var myArray = [];

app.js

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

Webpack 出现以下错误:

ERROR in ./app.js Module build failed: SyntaxError: "myArray" is read-only

如何使其不是只读而是可调的？

谢谢!

Answer 1

您应该在这里考虑采用不同的方法。本质上，您正在违背使 React 发挥作用的单向数据流原则。

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

然后，如果您希望子组件更改数组，则需要向下传递一个名为 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 中的子组件。