- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 Redux 新手,在尝试将 Redux 连接到我的 React 应用程序时遇到很多问题,每当我在输入框中输入内容时,我都会收到此错误:
Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant? at dispatch (eval at ./node_modules/redux/es/createStore.js (bundle.js:4248), :164:13) at handleSearchTermChange (eval at ./js/Landing.jsx (bundle.js:757), :78:7) at Object.executeOnChange (eval at ./node_modules/react-dom/lib/LinkedValueUtils.js (bundle.js:2779), :132:34) at ReactDOMComponent._handleChange (eval at ./node_modules/react-dom/lib/ReactDOMInput.js (bundle.js:2899), :239:38) at Object.ReactErrorUtils.invokeGuardedCallback (eval at ./node_modules/react-dom/lib/ReactErrorUtils.js (bundle.js:3019), :69:16) at executeDispatch (eval at ./node_modules/react-dom/lib/EventPluginUtils.js (bundle.js:2739), :85:21) at Object.executeDispatchesInOrder (eval at ./node_modules/react-dom/lib/EventPluginUtils.js (bundle.js:2739), :108:5) at executeDispatchesAndRelease (eval at ./node_modules/react-dom/lib/EventPluginHub.js (bundle.js:2723), :45:22) at executeDispatchesAndReleaseTopLevel (eval at ./node_modules/react-dom/lib/EventPluginHub.js (bundle.js:2723), :56:10) at Array.forEach ()
这是我的 Landing.jsx:
// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import type { RouterHistory } from 'react-router-dom';
import { setSearchTerm } from './actionCreators';
class Landing extends Component {
props: {
searchTerm: string,
handleSearchTermChange: Function,
history: RouterHistory
};
goToSearch = (event: SyntheticEvent) => {
event.preventDefault();
this.props.history.push('/search');
};
render() {
return (
<div className="landing">
<h1>svideo</h1>
<form onSubmit={this.goToSearch}>
<input
onChange={this.props.handleSearchTermChange}
value={this.props.searchTerm}
type="text"
placeholder="Search"
/>
</form>
<Link to="/search">or Browse All</Link>
</div>
);
}
}
const mapStateToProps = state => ({ searchTerm: state.searchTerm });
const mapDispatchToProps = (dispatch: Function) => ({
handleSearchTermChange(event) {
dispatch(setSearchTerm(event.target.value));
}
});
export default connect(mapStateToProps, mapDispatchToProps)(Landing);
这是我的 store.js
import { createStore } from 'redux';
import reducers from './reducers';
const store = createStore(reducers);
export default store;
这是我的action.js 文件:
/* This file will be a bunch of constants*/
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
我的actionCreators.js
import { SEARCH_SEARCH_TERM } from './actions';
/* Takes in a "searchterm" and it returns type and payload */
export function setSearchTerm(searchTerm: string) {
return { type: SEARCH_SEARCH_TERM, payload: searchTerm };
}
还有reducer.js:
import { SET_SEARCH_TERM } from './actions';
const DEFAULT_STATE = {
searchTerm: ''
};
const setSearchTerm = (state, action) => Object.assign({}, state, { searchTerm: action.payload });
const rootReducer = (state = DEFAULT_STATE, action: Action) => {
switch (action.type) {
case SET_SEARCH_TERM:
return setSearchTerm(state, action);
default:
return state;
}
};
export default rootReducer;
真的希望有人能在这里启发我,因为我对整个 React、Redux、Flow 和 Type 世界都很陌生。
最佳答案
好吧,问题是基本上,我试图导入一个由于拼写错误而不存在的函数:
这是我的 action.js 文件中的声明:
/* This file will be a bunch of constants*/
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
我试图像这样导入 const:
import { SEARCH_SEARCH_TERM } from './actions';
export function setSearchTerm(searchTerm: string) {
return { type: SEARCH_SEARCH_TERM, payload: searchTerm };
}
SEARCH_SEARCH_TERM 未定义,我将其更改为 SET_SEARCH_TERM,现在它可以正常工作。感谢@markerikson 对原始帖子的评论。
关于javascript - 将 Redux 连接到我的 React APP : Actions may not have an undefined "type" property,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51970053/
您好,下面是我在 AWS 中创建启用了弹性 IP 的实例的模板。但是我不确定我哪里出错了。我已经通过在线 json 验证器验证了 json,仍然面临问题请帮忙 { "AWSTemplateForm
标题有点乱,但已经说明了一切。我想在一个属性的属性上有一个属性观察器: class A { var b: B init() { b = B() } fu
假设我的一个 Controller 中有这样的方法: [Route("api/Products")] public IQueryable GetProducts() { return db.P
这有效: // @flow import React, {Component} from 'react'; type Props = {}; class Delete extends Componen
我有一个 ViewModelBase 类,我在其中为 INotifyPropertyChanged 接口(interface)定义了 RaisePropertyChanged 方法。大多数 MVVM
我创建了类: class StorageBase { public Queue Slices {get;set;} } 和 wpf 自定义控件,它具有 StorageBase 类型的依赖属性
我的 java 应用程序问题是 log4j2 系统日志不是写在 'local1.log' 中而是'消息'。我的/etc/rsyslog.conf 在/etc/rsyslog.conf 中配置为 'lo
为什么需要在对象中使用 this.property = property ?它是用来定义对象的“外部世界”的属性吗? function Person(property) { this.property
摘要: 这个问题是关于属性的继承与从彼此继承属性的类的内部和外部的不同读/写访问相结合。 详细信息: 我有一个类 A 和另一个继承自 A 的类 B。 A 中声明了属性someProperty。我希望该
我正在开发 ASP.NET MVC 应用,设计域模型,使用(测试)新的 EF Code First 功能。 我有一个可能有也可能没有截止日期的事件实体,处理它的最佳方法是什么? 1 个属性: publ
我在配置项目时经常使用它们,但大多数情况下都是按照指示添加 fragment 。我完全不知道哪个文件到底是做什么的。谁能清楚地说明每个文件的用途。 到目前为止我认为 local.properties
在运行 python 文件以使用 rasa nlu 训练文件时,我在命令提示符下收到此错误 我目前正在使用 Windows 10 rasa_core==0.8.2 rasa_nlu==0.11.4 p
我在这方面遇到了一些麻烦,尽管我已经搜索了答案,但还是找不到。 为了使用 AsyncAppender,我看到了很多不同的 log4j 配置,无论如何,它们都与 .properties 配置文件无关。
我正在编写一个 Python 类,并使用 @property 装饰器为该类创建属性。 我在文档中没有找到太多关于这个装饰器的信息,但是从我可以从 Stack Overflow 和我的 Python l
在 gradle 任务中,我可以创建这样的路径: System.env.FOLDER_PATH + '/subFolder' 但我想在我的 gradle.properties 中设置它,所以它会像 s
如何在属性文件的 log4j2 中创建键值对? 我知道在 log4j 版本 1 中它是这样完成的: log4j.appender.x.additionalFields={'key': 'value'}
我想通了 struct PropertyTest { @property int x() { return val; } @property void x( int newVal )
我有 REST (Jersey) webservice,它利用了一些编码/解码到/来自 XML 的数据对象。数据对象位于 webservice war 所依赖的单独项目/jar 中。 我使用 MOXy
我正在创建一个 LinkedList 类: function LinkedList(){ ... 有什么区别: this.addNode = function(data){
关于语义的快速问题:) 如果我正在编写一个协议(protocol),这是首选: // (a) @protocol MyProtocol @property (nonatomic, copy) NSSe
我是一名优秀的程序员,十分优秀!