我已经阅读了有关此错误的多个来源,但在这里我无法弄清楚自己在做什么。 我已经在使用自定义中间件,并且我相信自己会正确返回操作。 有什么建议吗? 然后在actions.js中 浏览器控制台中显示的错误: ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
> // I get user here with action function which makes call to route
/api/users/$_id
export const getUser = (_id) => (dispatch) => {
dispatch(setUsersLoading());
axios.get(`/api/users/${_id}`)
.then(res =>
dispatch({
type: GET_USER,
payload: res.data
}))
.catch(err =>
dispatch(returnErrors(err.response.data, err.response.status))
);
}
> // This is my Manage Role Assignment component class
class ManageRoleAssignment extends Component {
constructor(props) {
super(props)
this.state = {
currentPage: 0,
roles: "",
selected: [], // this the state I'm using!
personnel: []
}
}
static propTypes = {
getUsers: PropTypes.func.isRequired,
**getUser: PropTypes.func.isRequired**, //Prop action function used!
users: PropTypes.object.isRequired,
**user: PropTypes.object.isRequired**, //The prop object used!
}
componentDidMount() {
this.props.getUsers();
}
handleChange = (e) => {
let target = e.target
let name = target.name
let value = Array.from(target.selectedOptions, option => option.value)
this.setState({
[name]: value
})
}
> I'm calling the this.props.getUser here in the onSubmit
onSubmit = (e) => {
console.log("SELECTED", this.state.selected)
console.log("PERSONNEL", this.state.personnel)
//let { user } = this.props.user
this.props.getUser(this.state.selected)
console.log("USER", this.props.user)
e.preventDefault();
}
我的开始渲染 function 为 class
render() {
let { users } = this.props.users
const { currentPage } = this.state
this.pageSize = 1;
this.pagesCount = Math.ceil(10 / this.pageSize)
return (
<div>
<Container className="list">
<form onSubmit={this.handleSubmit}>
<ListGroup>
这是我的多 select 元素的开始,其中为 this.state 选择了用户。选择 state
<h5>Select 1 or more users.</h5>
<select size="2" value={this.state.selected} onChange={this.handleChange}
style={{ width: 265 + 'px', fontSize: 20 + 'px' }} name="selected" id="users" multiple>
{users.map(({ _id, name, email, role }) => (
<option value={_id}>
{name}
</option>
))}
</select>
</ListGroup>
<br />
<br />
这是我要为用户选择角色的地方,它只是列出角色
<h5>Select a role to assign.</h5>
<select value={this.state.personnel} onChange={this.handleChange}
style={{ width: 265 + 'px', fontSize: 20 + 'px' }} name="personnel">
{Object.keys(Role).map(r => <option value={r}>{Role[r]}</option>)}
</select>
<br />
<Button style={{ marginLeft: 100 + 'px' }}>Submit </Button>
</form>
<Container className="personnelTable">
<Table size="sm" striped >
<thead>
<tr >
<th><h5>Name</h5></th><th><h5>Email</h5></th><th><h5>Role</h5></th>
</tr>
</thead>
这是我列出用于测试目的的值的地方,它是从上面的多选择元素中选择的用户的 _id
{this.state.selected.map(value => (
<tr>
{value}
</tr>
))}
</Table>
<TablePagination
currentPage={currentPage}
pagesCount={this.pagesCount}
handlePageClick={this.handlePageClick}
/>
</Container>
</Container>
</div >
)
}
}
const mapStateToProps = (state) => ({
users: state.users,
user: state.users
})
export default connect(mapStateToProps, { getUsers, getUser })((ManageRoleAssignment))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.