我想从json文件中获取数据,然后使用React和Redux在屏幕上呈现它。 JSX是标准的,我使用<Provide>
标记并将store
值设置为我的商店。对于mapStateToProps
以及undefined
,this.props
正在toTakeData()
。
这里有行动文件请求:
let data = {
loading: true,
items: [],
prevName: null,
selectedProfile: '',
term: ''
}
export function getItems() {
getRequest();
return {
type: 'GET_ITEMS',
payload: data
}
}
const getRequest = async () => {
const response = await fetch('http://localhost:8000/api/item')
.then( response => response.json() )
.then( json => {
data.items = json;
data.selectedProfile = json[0];
data.loading = false;
data.prevName = json[0].general.firstName + ' ' + json[0].general.lastName;
} )
.catch( err => console.error( err ) );
}
这里是组件文件,它假设呈现数据:
const mapStateToProps = state => {
console.log(state.items);
return {
items: state.items,
prevName: state.prevName,
selectedProfile: state.selectedProfile,
term: state.term,
loading: state.loading
};
};
const mapActionsToProps = {
toTakeData: getItems
};
export default connect(mapStateToProps, mapActionsToProps)(SelectMenu);