我的react组件从多个axios获取获取API数据。我需要以各种方式映射和过滤数据，并且不确定是否应该在react容器或redux存储中这样做。此外，即使装载了我的数据，由于动作的异步性质，我仍然经常得到不确定的结果。
该应用程序是面向纸币收集者的收集生成器。用户可以浏览世界各地的注释，查看，添加和编辑集合（CollectionBuilder）和需求列表（WantListBuilder-如下所示）中的注释。
数据是从我自己的API发送的三个不同阵列（区域，国家/地区，钞票）中的对象阵列。
regions = [{ region_name: "Africa"}, { region_name: "Asia" }, { region_name: "Caribbean"}, etc.] length = 9
countries = [{ name: "Angola", reg_id: 1 }, { name: "Argentina", reg_id: 8 }, { name: "Armenia", reg_id: 5}, etc.] length = 209
banknotes = [ { ctry_id: 1, catalog_no: "151A", denomination: 5, currency: "Kwanzas", issue_date: "2012", img_url: "https://yadda-yadda-yadda" }, etc] length = 282
关键组成部分包括一个选择区域，其中选择一个区域（例如非洲）会填充该区域的第二个国家/地区。选择一个国家后，将显示该国家的便笺。
我已经能够使用地图和过滤器填充选择内容并呈现所有注释，但是我无法过滤注释以删除集合中已有的项目以及集合和想要列表构建器中的想要列表。
此外，我尝试保持状态整洁，因此我专注于操纵组件中的道具。这是明智的方法吗？
**Select.js component**
* IMPORTS *
class Select extends Component {
componentDidMount() {
this.props.onGetRegions();
this.props.onGetCountries();
}
regionHandler = event => {
const selectedRegion = event.target.value;
this.props.onRegionChange(selectedRegion);
};
countryHandler = event => {
const selectedCountry = event.target.value;
this.props.onCountryChange(selectedCountry);
};
render() {
const { selectedRegion } = this.props;
const { selectedCountry } = this.props;
const region = this.props.regions.map(region => {
return (
<RegionOption
key={region.id}
id={region.id}
region={region.region_name}
/>
);
});
const filteredCountries = this.props.countries.filter(
country => country.reg_id === parseInt(selectedRegion)
);
const renderedCountries = filteredCountries.map(country => {
return (
<CountryOption
key={country.id}
id={country.id}
country={country.name}
/>
);
});
let label;
if (selectedRegion) {
label = <SelectLabelDirective />;
} else {
label = <SelectLabel />;
}
return (
<Container>
<Row>
<Col className={styles.Col}>
<label>Select a Region</label>
<hr />
<select
className={styles.Select}
name="regions"
value={selectedRegion}
onChange={this.regionHandler}
>
{region}
</select>
</Col>
<Col className={styles.Col}>
{label}
<hr />
<select
className={styles.Select}
name="countries"
value={selectedCountry}
onChange={this.countryHandler}
>
{renderedCountries}
</select>
</Col>
</Row>
</Container>
);
}
}
const mapStateToProps = state => {
return {
regions: state.select.regions,
countries: state.select.countries,
selectedRegion: state.select.selectedRegion,
selectedCountry: state.select.selectedCountry
};
};
const mapDispatchToProps = dispatch => {
return {
onGetRegions: () => dispatch(actions.getRegions()),
onGetCountries: () => dispatch(actions.getCountries()),
onRegionChange: selectedRegion =>
dispatch(actions.regionSelected(selectedRegion)),
onCountryChange: selectedCountry =>
dispatch(actions.countrySelected(selectedCountry))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Select);
**WantListBuilder.js container**
* IMPORTS *
class WantListBuilder extends Component {
state = {
fetched: false
};
componentDidMount() {
this.props.onFetchBanknotes();
this.props.onFetchWantlist();
}
render() {
let builder = <Spinner />;
if (this.props.banknotes) {
// const mapWant = this.props.wantlist.map(listnote => listnote)
// const filterNotes = this.props.banknotes.filter(banknote => banknote.banknote_id !== mapWant.note_id)
// console.log(mapWant[0], filterNotes);
builder = (
<Container>
<h1>WantListBuilder Builder</h1>
<Select />
<Banknotes
banknotes={this.props.banknotes}
region={this.props.selectedRegion}
country={this.props.selectedCountry}
wantlist={this.props.wantlist}
/>
</Container>
);
}
return <div>{builder}</div>;
}
}
const mapStateToProps = state => {
console.log("WANTLIST", state);
return {
banknotes: state.note.banknotes,
selectedRegion: state.select.selectedRegion,
selectedCountry: state.select.selectedCountry,
wantlist: state.wantlist.wantlist
};
};
const mapDispatchToProps = dispatch => {
return {
onFetchBanknotes: () => dispatch(actions.fetchBanknotes()),
onFetchWantlist: () => dispatch(wantListActions.fetchWantlist())
};
};
export default connect(mapStateToProps, mapDispatchToProps(WantListBuilder);
**wantListReducer.js (banknoteReducer.js is identical, but with banknote: [] in state)**
import * as actionTypes from "../../actions/wantlistActions/wantlistActionTypes";
const intitialState = {
wantlist: [],
fetching: false,
fetched: false,
error: false
};
const fetchWantlistStart = (state, action) => {
return { ...state, fetching: true }
};
const fetchWantlistFail = (state, action) => {
return {state, fetching: false, error: action.payload}
};
const fetchWantlist = (state, action) => {
return {
...state,
fetching: false,
fetched: true,
wantlist: action.payload
}
};
const reducer = (state = intitialState, action) => {
switch (action.type) {
case actionTypes.FETCH_WANTLIST_START:
return fetchWantlistStart(state, action);
case actionTypes.FETCH_WANTLIST_FAIL:
return fetchWantlistFail(state, action);
case actionTypes.FETCH_WANTLIST:
return fetchWantlist(state, action);
default:
return state;
}
};
export default reducer;
在WantListBuilder中，我想将过滤后的数组发送到Banknotes.js组件（该组件将显示带有便笺图像，国家/地区，面额等的卡片）。该数组将删除用户的需求列表中已经存在的便笺从选择操作上呈现的注释中。我似乎无法渲染发送道具所需的数组。对不起，我很抱歉。这是我的第一个问题尝试。