- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我实际上正在尝试开发一个简单的组件,该组件对应于一个列表,当我按下一个按钮时,我会再填充一个项目。
我的问题是我使用 ES6,所以我不使用 getInitialState,我使用构造函数进行初始化,如文档中所述。
我的问题是,现在 this.context 在我的构造函数中未定义,我无法直接在构造函数中获取我的第一次数组(或预加载数组):
import React from 'react';
import ListStore from '../stores/ListStore';
class Client extends React.Component {
constructor(props){
super(props);
this.state = this.getStoreState(); // throw me that in getStoreState, this.context is undefined
}
static contextTypes = {
executeAction: React.PropTypes.func.isRequired,
getStore: React.PropTypes.func.isRequired
};
componentDidMount() {
this.context.getStore(ListStore).addChangeListener(this._onStoreChange.bind(this));
}
componentWillUnmount() {
this.context.getStore(ListStore).removeChangeListener(this._onStoreChange.bind(this));
}
_onStoreChange () {
this.setState(this.getStoreState());
}
getStoreState() {
return {
myListView: this.context.getStore(ListStore).getItems() // gives undefined
}
}
add(e){
this.context.executeAction(function (actionContext, payload, done) {
actionContext.dispatch('ADD_ITEM', {name:'toto', time:new Date().getTime()});
});
}
render() {
return (
<div>
<h2>Client</h2>
<p>List of all the clients</p>
<button onClick={this.add.bind(this)}>Click Me</button>
<ul>
{this.state.myListView.map(function(test) {
return <li key={test.time}>{test.name}</li>;
})}
</ul>
</div>
);
}
}
export default Client;
我只想在构造函数中预加载数组,无论它是否为空,这正是我的商店返回的内容:
从'fluxible/addons/BaseStore'导入BaseStore;
class ListStore extends BaseStore {
constructor(dispatcher) {
super(dispatcher);
this.listOfClient = [];
}
dehydrate() {
return {
listOfClient: this.listOfClient
};
}
rehydrate(state) {
this.listOfClient = state.listOfClient;
}
addItem(item){
this.listOfClient.push(item);
this.emitChange();
}
getItems(){
return this.listOfClient;
}
}
ListStore.storeName = 'ListStore';
ListStore.handlers = {
'ADD_ITEM': 'addItem'
};
export default ListStore;
谢谢你的帮助
最佳答案
你面临的问题是因为你的组件应该是无状态的,我不能这么说,状态应该存在于你的商店中,(UI 状态,“可以”存在于你的组件中,但这是值得商榷的)
您应该做的是使用更高级别的组件,将您的 React 组件包装在更高级别的组件中,让该组件从商店中获取状态,并将其作为 props 传递给您的组件。
这样您就不需要初始状态,您只需设置 defaultProps 和 propTypes。
这样你的组件是无状态的,你可以充分利用 react 生命周期,它也变得可重用,因为你没有在你的组件中获取实际数据的逻辑。
希望这有帮助:)
关于javascript - React Js,this.context 在构造函数方法中未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32382975/
我正在尝试加载外部 SVG 并将其附加到 Electron 项目中的现有 SVG。 d3.xml 方法对我不起作用,所以我正在查看 d3.symbols ,希望如果我提供路径数据(来自 fs.read
我正在编写一个 Web 应用程序,使用 Go 作为后端。我正在使用这个 GraphQL 库 (link)和 Echo Web 框架 (link) .问题在于 graphql-go 库在 Go 中使用了
有没有办法改造 gin.Context至 context.Context在围棋?构建 Go 微服务应该使用什么? 最佳答案 标准库的 context.Context type 是一个接口(interf
如果我能够像这样注册一个接收器: LocalBroadcastManager.getInstance(this).registerReceiver(mMessageReceiver, new Inte
如果我有 appengine.Context 而不是 ,我不知道如何调用 cloud.WithContext 和 google.DefaultClient >上下文。上下文。 有(旧的)“appeng
有什么区别- AccountManager accountManager = (AccountManager) context.getSystemService(Context.ACCOUNT_SER
我刚读了这篇文章:Build You Own Web Framework In Go为了在处理程序之间共享值,我选择了 context.Context我通过以下方式使用它在处理程序和中间件之间共享值:
在 Visual Studio Code 中,我对 3 个“上下文”菜单项感到非常困惑:Run Tests in Context和 Debug Tests in Context和 Run .NET C
我正在使用带有 和 @Autowired 的 Spring 2.5.6 版本。 虽然我在调度程序上下文中使用 SimpleUrlHandlerMapping ,但一切正常 - Autowiring 工
我使用的是 Context.registerReceiver()、Context.sendBroadcast(Intent) 和 Context.unregisterReceiver() 但是当我看到
问题在于以下错误, [错误] 在 scala.tools.nsc.typechecker.Typers$Typer.typedApply$1(Typers.scala:4580)[错误] 在 scal
最近我正在尝试使用 SoundPool 在我的应用程序中播放一些简单的音效 但不幸的是它在 AVD 中不起作用并且应用程序崩溃 “上下文”到底是什么意思? 完全不懂 提前致谢 最佳答案 任何上下文都允
我正在使用上下文建议器,我想知道我们是否可以设置用于建议的上下文范围,而不是使用所有上下文。 目前查询需要匹配所有上下文。我们能否在上下文中添加“或”运算和/或指定用于特定查询的上下文? 以here为
我被一个使用这种方法的函数卡住了。所以我知道如何使用 expressionValue(with:context:) 函数,但上下文如何参与对我来说仍然是不透明的。也许有人有简单的例子? try tra
我正在尝试在上下文管理器中更改我的 python 程序中的目录。使用 invoke.context.Context 似乎是正确的方法,从 Fabric 文档中获取并且使用常规 with os.chdi
我最近开始使用 Android Studio 处理我的 Android 项目。我注意到在 IDE 的右下角,有文本 Context: .好奇心打败了我,所以现在我正在网上搜索更多信息。我还没有找到任
假设我有这些功能: func A(ctx context.Context) { // A takes some time to process } func B(ctx context.Con
所以,我有一个 context.Context( https://golang.org/pkg/context/ ) 变量,有没有办法列出这个变量包含的所有键? 最佳答案 可以使用不安全反射列出 co
我正在尝试找出传播 context.Context 的正确方法用于在使用 Gin 时使用 OpenTelemetry 进行跟踪。 我目前有一个 gin调用函数并传递 *gin.Context 的处理程
我们可以使用 Remove["context`*"] 删除特定上下文中的所有符号。 .但是是否可以删除 "context`"自己从系统中删除,以便它不再在 Contexts[] 中列出? 最佳答案 据
我是一名优秀的程序员,十分优秀!