我是 React 的初学者,所以请多多包涵。几个小时以来,我一直在努力解决这个问题,只是无法理解我做错了什么。
一切正常,只需找到并加载 0 个错误。但是,当我尝试启动一个动作时,绝对没有任何反应。我正在记录状态,并且在应用程序初始启动后没有额外的日志。
所以我正在尝试构建的是超级简单的练习应用程序。它只是在屏幕上显示一个单词,每个字母本身就是一个组成部分。用户可以单击两个按钮中的任何一个,在单词的开头或结尾添加一个字母。而已。我仅有的两个动作是添加这些字母。
这是我的主要 App.js:
import React from 'react';
import Header from './Header';
import Adder from './Adder';
import CurrentWord from './CurrentWord';
import { connect } from 'react-redux';
import { addLetterStart, addLetterEnd } from '../actions';
class App extends React.Component {
render() {
console.log(this.props.word);
return (
<div>
<Header />
<div style={{ margin: "100px", display: "flex", justifyContent: "center"}}>
<Adder onClick={()=> this.props.addLetterStart()} />
<CurrentWord />
<Adder onClick={()=> this.props.addLetterEnd()} />
</div>
</div>
)
}
};
const mapStateToProps = (state) => {
return {
word: state.word
}
};
export default connect(mapStateToProps, {addLetterStart, addLetterEnd})(App);
这是我的 CurrentWord 组件:
import React from 'react';
import SingleLetter from './SingleLetter'
import { connect } from 'react-redux';
class CurrentWord extends React.Component {
renderLetters() {
return this.props.word.map(letter => {
return <SingleLetter key={Math.floor(Math.random() * 100)} letter={letter} />
});
}
render() {
return (
<div style={{ display: "flex" }}>
{this.renderLetters()}
</div>
)
}
};
const mapStateToProps = (state) => {
return { word: state.word }
};
export default connect(mapStateToProps)(CurrentWord);
这些是我的行动 (actions/index.js)
import {ADD_END, ADD_START} from './types';
export const addLetterStart = () => {
return {
type: ADD_START
};
};
export const addLetterEnd = () => {
return {
type: ADD_END
};
};
我的 LettersReducer:
import { ADD_END, ADD_START } from '../actions/types';
export default (state = ['X', 'X', 'X', 'X'], action) => {
switch (action.type) {
case ADD_START:
return ['X', ...state];
case ADD_END:
return [...state, 'X'];
default:
return state;
}
};
我的减速器/index.js:
import { combineReducers } from 'redux';
import LettersReducer from './LettersReducer';
export default combineReducers({
word: LettersReducer
});
还有我的主要 index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './components/App';
import reducers from './reducers';
const store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('#root')
);
这是我的加法器组件:
import React from 'react';
const Adder = () => {
return (
<div className="ui card" style={{
height: "150px",
width: "150px",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor:"pointer",
margin: "10px"
}}>
<p style={{
fontSize: "80px",
color: "#ececec" }}>+</p>
</div>
)
};
export default Adder;
我认为这应该是所有相关的。我会很感激任何帮助,谢谢!