当我按下按钮增加或减少时,我得到这个message。
我认为所有步骤都可以,但是我不明白为什么当我按下按钮(+或-)时,存储/状态设置为undefined
;
src / App.js
import React, { Component } from "react";
import Counter from "./components/counter";
import { connect } from "react-redux";
class App extends Component {
render() {
return (
<div>
{this.props.data.map(counter => (
<Counter key={counter.id} id={counter.id} value={counter.value} />
))}
</div>
);
}
}
const mapStateToProps = state => {
return {
data: state.data
};
};
export default connect(mapStateToProps)(App);
src / components / counter.js
import React, { Component } from "react";
import { connect } from "react-redux";
class Counter extends Component {
render() {
return (
<div>
<h1>{this.props.value}</h1>
<button onClick={() => this.props.onIcrement(this.props.id)}>
+ UP
</button>
<button onClick={() => this.props.onDecrement(this.props.id)}>
- DOWN
</button>
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return {
onIcrement: id => dispatch({ type: "INCREMENT", key: id }),
onDecrement: id => dispatch({ type: "DECREMENT", key: id })
};
};
export default connect(
null,
mapDispatchToProps
)(Counter);
src / store / reducer.js
const initialState = {
data: [{ id: 1, value: 4 }, { id: 2, value: 0 }]
};
const reducer = (state = initialState, action) => {
const newState = { ...state };
switch (action.type) {
case "INCREMENT":
return newState.data.map(el => {
if (action.key === el.id) {
return el.value++;
}
return el.value;
});
case "DECREMENT":
return newState.data.map(el => {
if (action.key === el.id) {
return el.value--;
}
return el.value;
});
default:
return newState;
}
};
export default reducer;
src / index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./store/reducer";
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
............................................... .................................
答案 0 :(得分:2)
在化简器中,您将返回一个数组,而不是带有键data
的对象,该键是一个数组。
以下代码应该可以使用。
const reducer = (state = initialState, action) => {
switch (action.type) {
case "INCREMENT":
return {
data: state.data.map(el => { // <- return object with data instead of newState.data.map
if (action.key === el.id) {
return { ...el, value: el.value + 1};
}
return el;
})
};
case "DECREMENT":
return {
data: state.data.map(el => { // <- same here too
if (action.key === el.id) {
return { ...el, value: el.value - 1 };
}
return el;
})
};
default:
return state;
}
};