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

Question

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

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

我的阵列.js

export var myArray = [];

应用.js

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

Webpack 给出以下错误：

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

如何使其不仅可读，而且可调整？

谢谢！

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 中的子数组。