我有这个简单的代码：
class App extends Component {
render() {
return (
<div>
<PanelPayment />
</div>
);
}
}
export default App
和这个：
export default class PanelPayment {
render() {
return (
<div>
<button>Pay now!</button>
</div>
)
}
}
而且我得到了错误：
TypeError：无法将类作为函数调用
class.App.js:66 Uncaught TypeError: Cannot call a class as a function
at _classCallCheck (class.App.js:66)
at PanelPayment (class.PanelPayment.js:3)
at ReactCompositeComponent.js:305
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
at Object.mountComponent (ReactReconciler.js:45)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
at ReactDOMComponent.mountComponent …我正在尝试一起使用React,Redux和TypeScript时如何减少样板量.可能你不能在这种情况下,但想看看是否有人有想法.
我目前有一个组件调度一个切换菜单的动作,在显示和隐藏它之间交替.要做到这一点,我已经为我的类定义了这样的东西(省略与state相关的代码,专注于调度动作):
import {Action, toggleMenu} from "../../actions/index";
interface IConnectedDispatch {
toggleMenu: (isActive: boolean) => Action;
}
class HeaderMenu extends React.Component<IOwnProps & IConnectedState & IConnectedDispatch, any> {
constructor(props: IOwnProps & IConnectedState & IConnectedDispatch) {
super(props);
this.toggleMenuState = this.toggleMenuState.bind(this);
}
public render() {
return (
<button className={buttonClass} onClick={this.props.toggleMenu(this.props.isActive)} type="button">
</button>
);
}
}
const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): IConnectedDispatch => ({
toggleMenu: (isActive: boolean) => dispatch(toggleMenu(isActive))});
该操作定义为
export function toggleMenu(isActive: boolean): Dispatch<Action> {
return (dispatch: Dispatch<Action>) => {
dispatch({
isActive,
type: "TOGGLE_MENU", …我想在我的redux状态下更新chefs数组中的一位厨师.该数组的一个例子如下:
[
{ _id: 1, name: 'first chef' },
{ _id: 2, name: 'second chef' },
{ _id: 2, name: 'third chef' }
]
我调用了API,然后返回更新的chef对象.我基本上在当前状态下找到相关的厨师对象,但是,当我不可更新地更新它时,我的反应组件不会重新渲染.
这是更新redux reducer中对象数组中单个对象的正确方法吗？
import _ from 'lodash';
import { ADMIN_LIST_CHEFS, ADMIN_GET_CHEF, UPDATE_CHEF_LIST } from '../actions/types';
const INITIAL_STATE = { chefs: [], chef: null };
let CHEFS = [];
let INDEX = null;
export default function (state = INITIAL_STATE, action) {
switch (action.type) {
case UPDATE_CHEF_LIST:
CHEFS = state.chefs;
INDEX = _.findIndex(CHEFS, (chef => chef._id === action.id)); …我正在学习React，并遇到了一个稍微棘手的问题。从我的API调用中，我得到一个包含对象数组的响应。我想在列表中显示它。为了了解响应的外观，这是一个示例（它是JSON数组）
data = [
{0: {name: "tom"}},
{1: {name: "Pope"}},
{2: {name: "jack"}}
];
要在我的容器中呈现此信息，请尝试如下操作：
render() {
const items = data.map((d) => <li>{d.name}</li>);
return (
<div>
<ul>
{items}
</ul>
</div>
)
}
但这没有打印任何内容。我什至没有任何错误。我认为我解析响应的方式是错误的。
解决我的棘手问题的正确方法是什么？
我第一次使用redux Saga处理我的API请求。我有一个异步函数，可以发送一个简单的发布请求，如下所示：
const onLoginRequest = async (userName, password) =>
await fetch(`${loginApi}`, { method: 'POST', body: { userName:userName,password:password } })
.then(res => res.json())
.then(res => res)
.catch(error => error);
如果我在查询字符串中发送用户名和密码，则可以正常工作。但是，当将它们添加到我的POST正文中时，它大喊它们是未定义的。
知道我在做什么错吗？
我正在制作一个反应列表,其项目应触发更新状态的操作.然而,触发和状态更新都会发生,而onClick方法每次都使用相同的参数调用该操作.这不应该发生.传递给操作的参数必须取决于单击列表的项目.
我无法找到导致此错误的错误.
这是我的下拉类,其中呈现列表.
class DropDownMenu extends React.Component {
constructor(props){
super(props)
}
render(){
let content = []
var categories = this.props.categories
for (var i=0; i < categories.length; i++) {
var catName = categories[i]
var line = (
<li
key ={i}
onClick = {() => {this.props.onClick(catName)}}
>
<p>{catName}</p>
</li>
)
content.push(line)
}
return (
<div>
<Dropdown ref="dropdown">
<DropdownTrigger>Categories</DropdownTrigger>
<DropdownContent>
<ul>
{ content }
</ul>
</DropdownContent>
</Dropdown>
</div>
)
}
}这是管理状态并调用上述类的容器
class MenuContainer extends React.Component {
constructor(props) {
super(props)
} …给出以下react-redux代码:
const TextListContainer = ({ items, actions }) => (
<TextList items={items} actions={actions} />
)
为什么这里使用的是普通括号而不是大括号？
为了进一步说明我的问题:
正常功能:
const someFn = something => {
//...
}
BRACE STYLE功能:
const someFn = something => (
//...
)
这种代码风格从这里复制:https://github.com/reactjs/redux/blob/master/examples/todomvc/src/containers/App.js
我很反应和减少.
现在我想用redux进程重写我的post请求.
我当前的请求如下所示:
_handleSubmit(event) {
axios
.post('/createUrl', {
url: this.state.url
})
.then((response) => {
this.setState({
shortenInfos: response.data
})
})
.catch((error) => {
console.log(error);
});
event.preventDefault()
}
现在我创建了一个商店:
export default function url(state = 0, action) {
switch (action.type) {
case 'CREATE_URL':
// maybe axios request?!
return `${action.url}/test`
case 'CREATED_URL':
return `${action.url}/created`
default:
return state
}
}
所以我必须使用store.dispatch()？我应该让我的_handle提交这样的东西吗？
_handleSubmit(event) {
axios
.post('/createUrl', {
url: this.state.url
})
.then((response) => {
store.dispatch({
type: 'CREATED_URL',
url: response.data
})
})
.catch((error) => {
console.log(error);
});
event.preventDefault() …动作/ index.js
export const fetchAppointment = (userId) => async dispatch =>{
const request = await axios.get(`${URL}/apis/appointments/${userId}`)
dispatch({type :types.FETCH_APPOINTMENT, payload:request.data})
};
减速器/ reducer_appointment.js
import _ from 'lodash';
import * as types from '../actions/types';
export default function(state = null, action) {
switch (action.type) {
case types.FETCH_APPOINTMENT:
return _.mapKeys(action.payload, 'patients_id') || false
default:
return state;
}
}
app.js
renderAppointment(){
console.log(this.props.appointment)
switch(this.props.appointment){
case null:
console.log("null case")
return;
case false:
console.log("false case")
return <div>false case</div>;
default:
console.log("default case")
return <div>default case </div>;
}
}
问题我总是得到 …
我有一个基本的HTML表格，可以呈现Redux的一些输入数据。我想测试一下，对象1在<tr></tr>1中正确渲染，对象2在<tr></tr>2中正确渲染，依此类推。
import React, { PropTypes } from 'react';
let getBudgetItems = (budgets) => {
return budgets.map((budget, key) => {
return (
<tr className = "add-budget-table-row" key={"budget_item_" + key}>
<td>{budget.budgetCategory}</td>
<td>${budget.budgetCost}</td>
<td>{budget.budgetDate}</td>
<td><button className="btn btn-primary">Edit Budget</button></td>
</tr>
);
});
};
const RenderBudgetTable = ({ budgets }) => {
return (
<div className="table-responsive">
<table className="table table-hover add-budget-table">
<thead>
<tr>
<th>Budget Name</th>
<th>Monthly Cost</th>
<th>Due Date</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{getBudgetItems(budgets)}
</tbody>
</table>
</div>
);
};
RenderBudgetTable.propTypes …redux ×10
reactjs ×9
javascript ×6
react-redux ×4
ecmascript-6 ×1
enzyme ×1
immutability ×1
onclick ×1
reducers ×1
redux-saga ×1
typescript ×1