- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 ComponentDidMount() 函数中在 React Redux 存储中设置了一些值。 Redux Dev Tools 显示状态已更新。但在 props
中它并没有改变。
我的reducer.js是,
const inititalState = {
slickColumns: null,
slickData: null
}
const reducer = (state = inititalState, actions) => {
switch(actions.type) {
case actionsTypes.SET_SLICK_GRID_COLUMNS: {
return {
...state,
slickColumns: columns
};
}
case actionsTypes.SET_SLICK_GRID_DATA: {
return {
...state,
slickData: [...mock_slick_data]
};
}
default: {
return state;
}
}
}
export default reducer;
action.js,
import * as actions from './actions';
export const setSlickGridColumns = () => {
return {
type:actions.SET_SLICK_GRID_COLUMNS
}
}
export const setSlickGridData = () => {
return {
type: actions.SET_SLICK_GRID_DATA
}
}
main.js,(将 Redux 映射到状态)
const mapStateToProps = state => {
return {
slickColumns: state.slickColumns,
slickData: state.slickData
};
};
const mapDispatchToProps = dispatch => {
return {
onSetSlickDataColumns: () => {
dispatch(actionTypes.setSlickGridColumns());
},
onSetSlickData: () => {
dispatch(actionTypes.setSlickGridData());
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Dimensions()(Home));
在 ComponentDidMount 函数中,
this.props.onSetSlickDataColumns(); // able to see this method is running and the state is updated in Redux Dev Tools
this.props.onSetSlickData();
console.log(this.props.slickColumns); // getting null here.
dv.setItems(this.props.slickData);
即使存储状态已更新,我仍然无法获取 Prop 中的数据?为什么?有什么想法吗?
index.js,
import slickReducer from './store/reducers/SlickGrid';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
slickReducer,
composeEnhancers(applyMiddleware(thunk))
);
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));
[编辑]:最初我将initialState对象属性设置为'null;在这里添加我的 Redux 屏幕截图,
在此处添加额外的一些日志。这可能有助于解决此问题。实际上网格实例是在 ComponentDidMount() 方法中创建的。
componentDidMount() {
console.log("[componentDidmount]....");
this.props.onSetSlickDataColumns();
this.props.onSetSlickData();
console.log(this.props);
if (this.props.slickColumns.length !== 0) {
const grid = (this.gridInstance = new Grid(
this.grid,
dv,
this.props.slickColumns,
options
));
// ------------------
}
}
在做网格对象时,它不应该有空列和空DataView。
我在各种生命周期方法(例如constructor
、componentWillMount
)中调用了setSlickGridColumns
和setSlickGridData
方法并放置控制台还记录 mapStateToProps
、constructor
、componentWillMount
、render
和 componentDidMount
方法中的 props 。从日志中我得到的是,
[mapStateToProps]
this.props.slickColumns: null
[componentConstructor].... calling onSetSlickDataColumns() and onSetSlickData() methods here..
this.props.slickColumns: null
[componentwillmount].... calling onSetSlickDataColumns() and onSetSlickData() methods here..
this.props.slickColumns: null
[render]
this.props.slickColumns: null
[componentDidmount].... calling onSetSlickDataColumns() and onSetSlickData() methods here..
this.props.slickColumns: null
[mapStateToProps]
this.props.slickColumns: Array(300) // Here props values are set
[render]
this.props.slickColumns: Array(300)
从日志中,我了解到的是,必须在 componentDidMount
() 方法之前填充数据。但即使我在 constructor
和 ComponentWillMount
中调度了 reducer 函数,它也没有设置。希望此日志有助于解决此问题。
最佳答案
问题是您没有在您可以看到的 reducer 中设置新数据
const reducer = (state = inititalState, actions) => {
switch(actions.type) {
case actionsTypes.SET_SLICK_GRID_COLUMNS: {
return {
...state,
slickColumns : columns // you have to pass your new data as payload from your function : actions.payload
};
}
case actionsTypes.SET_SLICK_GRID_DATA: {
return {
...state,
slickData: [...mock_slick_data] // same here
};
}
default: {
return state;
}
}
}
您可以在分派(dispatch)操作时传递数据
dispatch(actionTypes.setSlickGridColumns('Pass your data here '));
然后你可以像这样获取数据作为参数
export const setSlickGridColumns = (data) => {
return {
type:actions.SET_SLICK_GRID_COLUMNS,
payload : data // pass your data as payload
}
}
现在您可以在 reducer 中使用您的数据,例如 actions.payload
.......
case actionsTypes.SET_SLICK_GRID_COLUMNS: {
return {
...state,
slickColumns : action.payload
};
........
关于javascript - ReduxReducer更新了值但没有反射(reflect)在props中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59984916/
我有一个Container、一个actionCreator 和一个reducer。在下面的代码中,是什么使Reducer能够返回action.text而不是更新后的状态对象?我认为 reducer 必
我目前正在用 javascript 重写一个大型桌面应用程序 - 具体来说,使用 React/Redux。不同操作的数量反射(reflect)了状态可能需要改变的不同方式的数量。目前,该应用程序中有超
这是新的。 我有一个通过 Fetch“GET”从 ASP.NET Core API 检索数据的操作。它被发送到 reducer 。调用 reducer ,此时,虽然对象使其到达那里,但状态并未更新。所
我在 Redux 中有一个状态,当前呈现如下: 点击前: {0: { open: false, negation: false, close: false }, 1:
向 action.data 添加回调是否有任何错误/反模式(就“thinking-in-react/redux”而言)?传递到一个 Action ? // reducer ACTION_FOR_RED
所以这里发生的是我正在尝试设置自动分页。我设置了一个 while 循环,在返回数据中的数组项数量大于 0 时发送 get 请求。每个循环都会将数据发送到我的 reducer AppendUserHis
我遇到了一个让我大吃一惊的问题。我正在使用 React 和 Redux 开发我的 Web 应用程序,我的应用程序使用使用 Firebase 实现的通知系统。每个通知的结构如下: var notific
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 3 年前。 Improv
我在网页上有一个简单的两个按钮,一个用于递增,一个用于递减整数。 一旦我点击+按钮,它就会在当前值上加1。 下面是我的Reducer,我用setTimeout包裹了“INCRMENT”,当我点击+按钮
我的代码如下所示: import { SAVE_SEARCH } from '../actions/index'; export default function (state = [], actio
我有一组评论,我想根据 ID 进行过滤并更改特定的键/值对。我的控制台日志函数返回数组中的正确项目,但我不确定获取 .filter 函数结果并将“liked”键从“false”更改为“true”的正确
我是一名优秀的程序员,十分优秀!