[英]Cannot update the app state from custom component using React and Redux
我有以下Codesandbox.io
:
https://codesandbox.io/s/qxkq5vvm1q
這是一個基本的ReactJS / Redux
應用程序。
這里的關鍵組件是:
一個Select
可以通過以下方式獲取其值: Redux (state manager) -> PanelMaterialSize (container) -> Select
一個Updater
組件,負責通過Redux
更新Select
上可用的值
Alert
按鈕,單擊該按鈕應警報存儲在store
的值
應該發生的是:
當用戶更改Select
上的選項時,該值應存儲在商店中。 這實際上是正常發生的- 好的
如果Select
的值發生更改(例如,由於Updater
組件),則它應使用其顯示的值自動更改存儲在商店中的值(類似於用戶更改其值)。 不幸的是,這沒有發生- 目標
以下是一些代碼:
./src/controls/Select/Select.js
import React, { Component } from "react";
import "./Select.scss";
class Select extends Component {
constructor(props) {
super(props);
let { name, data, className, ...controlProps } = this.props;
this.name = name;
this.data = data;
this.controlProps = controlProps;
this.state = {
[name]: data,
className
};
}
render() {
let data = this.state[this.name];
return (
<div className="control-select" {...this.controlProps}>
<div className="custom-dropdown custom-dropdown--grey">
<select className="custom-dropdown__select custom-dropdown__select--grey">
{this.props.data.length > 0 &&
this.props.data.map((elem, index) => {
return (
<option value={elem.value} key={index}>
{elem.text}
</option>
);
})}
</select>
</div>
</div>
);
}
}
export default Select;
src / controls / PanelMaterialSize / PanelMaterialSize.js
import React, { Component } from "react";
import { connect } from "react-redux";
import "./PanelMaterialSize.scss";
import Select from "../Select/Select";
import { setThemeList, setSelectedTheme } from "../../store/AppConfig/actions";
class PanelMaterialSize extends Component {
constructor(props) {
super(props);
this.state = {
selection: "",
options: []
};
}
handleChange = e => {
let target = e.target;
let value = target.value;
this.props.setSelectedTheme(value);
};
render() {
return (
<div className="partial-designer-panel-material-size">
<div>
<div className="label-input">
<div className="label">THEME</div>
<div className="input">
<Select
name="selection"
value={this.state.selection}
data={this.props.themeList}
style={{ width: "100%" }}
onChange={this.handleChange}
/>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = appState => {
return {
themeList: appState.appConfig.themeList,
selectedTheme: appState.appConfig.selectedTheme,
};
};
const mapDispatchToProps = dispatch => {
return {
setThemeList: themeList => dispatch(setThemeList(themeList)),
setSelectedTheme: selectedTheme => dispatch(setSelectedTheme(selectedTheme)),
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(PanelMaterialSize);
關於如何使第2點起作用的任何想法嗎?
如果可能,請在分叉的Codesandbox.io
上提供您的解決方案。
謝謝!
Updater
組件每3秒產生一次新的主題列表
它還必須調度setSelectedTheme
操作以在應用程序狀態下更新所選主題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.