javascript - 导出数组 ReactJS - 错误:数组是只读的
问题描述
我正在尝试使用 React 将变量导出到另一个文件。
我有一个数组,我想在多个文件中使用它。在一个文件中,当一个按钮被按下时它应该被清空。
myArray.js
export var myArray = [];
应用程序.js
import {myArray} from './myArray.js';
function resetArray(){
myArray = [];
}
Webpack 给出以下错误:
./app.js 中的错误模块构建失败:语法错误:“myArray”是只读的
我怎样才能使它不是只读的,而是可调节的?
谢谢!
解决方案
您应该在这里考虑一种不同的方法。本质上,您正在违反使 React 工作的单向数据流原则。
您应该重新设计它,以便在您的主要 React 组件中,将此数组设置为状态。然后将该数组作为道具传递给需要访问该数组的子组件。
然后,如果您希望子组件更改数组,则需要向下传递一个名为 的函数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 中的子组件。
推荐阅读
- javascript - 如何在javascript中覆盖嵌套数组对象
- javascript - jQuery最接近选择器不起作用并滚动并聚焦到一个类
- arrays - VBA如何直接访问字典键元素
- javascript - 有没有办法将页面自动滚动到特定行号的代码,使用谷歌代码美化格式化?
- python - Unable to convert custom trained frozen model into tflite format
- c# - 在测试完成时单击单个对象执行多键盘操作
- swift - Firebase 身份验证被调用两次
- android - 如何从 adb shell 输入文本中获取结果?
- xml - 在 android studio 中导入项目后,XML 文件中出现一些错误,例如 URI 无法识别
- javascript - 在谷歌地图上绘制多个点,从数据库中获取坐标