我有一个反应表，其中通过从axios调用到状态的响应数据来设置数据属性。我通过模态进行了一些更改，并调用了相同的axios调用来更新状态，这确实很棒，但是react表的UI不会更新。我增加了整个班级。它是laravel应用程序的前端，并且已经检查了axios调用的返回结果以及一切正常的情况。它甚至可以正确更新类的状态。
请参阅下面的整个课程。任何帮助将不胜感激。
import React, { Component } from 'react'
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import axios from 'axios';
import Modal from 'react-modal';
import EditableLabel from 'react-inline-editing';
import Select from 'react-select'
const headers = {
'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)',
maxHeight:'800px',
backgroundColor:'#004167',
borderRadius: '5px',
minWidth:'600px',
maxWidth:'600px',
position: 'absolute',
}
};
const colourStyles = {
singleValue: styles => ({ ...styles, fontSize: '18px' }),
// control: styles => ({ ...styles, height: '20px' })
}
export default class Users extends Component {
constructor() {
super();
this.state = {
users:[],
modalIsOpen:false,
confirmPass:'',
originalPass:'',
saveDisable:false,
errors:'',
webErrors:'',
addModalIsOpen:false,
addUserRole: 0,
newPass:'',
confirmNewPass:'',
addErrors:'',
addSaveDisable:false,
newUserEmail: 'user@user.com',
addUserFirstName: 'First Name',
addUserLastName: 'Last Name',
instructors:[
{ value: -1, label: 'None' }
],
studentSelected:false,
addUserInstructor: -1
};
}
componentDidMount() {
this.getUsers()
}
getUsers = () =>{
axios.get('/all-users').then(response => {
this.setState({
users: response.data,
})
})
}
getParent = () =>{
return document.querySelector('.course_builder_wrapper');
}
closeModal(){
this.setState({modalIsOpen:false, confirmPass:'', originalPass:'', errors:'',saveDisable:false});
}
_handleFocusOutFirstName = (text) =>{
this.setState({userFirstName:text})
}
_handleFocusOutLastName = (text) =>{
this.setState({userLastName:text})
}
_handleFocusOutAddFirstName = (text) =>{
this.setState({addUserFirstName:text})
}
_handleFocusOutAddLastName = (text) =>{
this.setState({addUserLastName:text})
}
selectChange = (value) =>{
this.setState({userRole:value.value})
}
addUserSelectChange = (value) =>{
this.setState({addUserRole:value.value})
if(value.value == 3){
this.setState({studentSelected:true})
this.getInstructors()
}else{
this.setState({studentSelected:false})
}
}
instructorSelectChange = (value) =>{
this.setState({addUserInstructor:value.value})
}
saveUser = () =>{
var curr = this
const vals ={
user_id:this.state.activeUser.id,
role_id:this.state.userRole,
first_name: this.state.userFirstName,
last_name: this.state.userLastName,
email: this.state.email,
pass: this.state.originalPass != '' ? this.state.originalPass : ''
}
axios
.post('/update-user', vals, headers)
.then(function (response) {
const data = response.data
curr.closeModal()
curr.getUsers()
})
.catch(error => {
console.log(error);
curr.setState({webErrors: error})
})
}
addUser = () =>{
if(this.state.newPass != ''){
var curr = this
const vals ={
role_id:this.state.addUserRole,
first_name: this.state.addUserFirstName,
last_name: this.state.addUserLastName,
email: this.state.newUserEmail,
pass: this.state.newPass,
instructor: this.state.addUserInstructor
}
axios
.post('/add-user', vals, headers)
.then(function (response) {
const data = response.data
curr.closeAddUserModal()
curr.getUsers()
})
.catch(error => {
console.log(error);
curr.setState({webErrors: error})
})
}else{
this.setState({addErrors:'Please Enter A Password'})
}
}
confirmPassCheck = (event) =>{
this.setState(
{confirmPass:event.target.value},
() => this.matchPasswords()
);
}
originalPassChange = (event) =>{
this.setState(
{originalPass:event.target.value},
() => this.matchPasswords()
);
}
newPassSet = (event) =>{
this.setState(
{newPass:event.target.value},
() => this.matchNewPasswords()
);
}
confirmNewPassCheck = (event) =>{
this.setState(
{confirmNewPass:event.target.value},
() => this.matchNewPasswords()
);
}
matchPasswords = () =>{
if(this.state.originalPass == this.state.confirmPass){
this.setState({saveDisable:false, errors:''})
}else{
this.setState({saveDisable:true, errors:'Passwords Do Not Match'})
}
}
matchNewPasswords = () =>{
if(this.state.newPass == this.state.confirmNewPass){
this.setState({addSaveDisable:false, addErrors:''})
}else{
this.setState({addSaveDisable:true, addErrors:'Passwords Do Not Match'})
}
}
changeEmail = (text) =>{
this.setState({email:text})
}
changeAddEmail = (text) =>{
this.setState({newUserEmail:text})
}
openAddUserModal = () =>{
this.setState({addModalIsOpen:true})
}
closeAddUserModal = () =>{
this.setState({addModalIsOpen:false})
}
getInstructors = () =>{
axios.get('/all-instructors-select').then(response => {
this.setState({
instructors: response.data,
})
})
}
render() {
const users = this.state.users
const options = [
{ value: 1, label: 'Admin' },
{ value: 2, label: 'Instructor' },
{ value: 3, label: 'Student' },
{ value: 4, label: 'Contributor' }
]
return (
<div className="users_wrap">
<h4>Users</h4>
<div className="add_user_b">
<button className="add_user_button" onClick={this.openAddUserModal}>Add User</button>
</div>
{users.length > 0 &&
<div className="user_table">
<ReactTable
data={users}
NoDataComponent={() => null}
defaultPageSize={users.length}
showPagination={false}
columns={[
{
Header: 'First Name',
accessor: 'first_name'
},
{
Header: 'Last Name',
accessor: 'last_name'
},
{
Header: 'Role',
accessor: 'roles[0].name'
}
]}
getTdProps={(state, rowInfo, column, instance) => {
return {
onClick: (e, handleOriginal) => {
const activeItem = rowInfo.original;
this.setState({activeUser:activeItem, modalIsOpen:true, userFirstName:activeItem.first_name, userLastName:activeItem.last_name, userRole: activeItem.roles[0].id, email:activeItem.email})
}
};
}}
/>
</div>
}
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
shouldCloseOnOverlayClick={false}
parentSelector={this.getParent}
>
<div>
<div className="modal_header">Edit User</div>
<div className="modal_inner_mat">
{this.state.activeUser != undefined &&
<div>
<div className="modal_grid_3">
<div className="modal_grid_item">
<EditableLabel text={this.state.activeUser.first_name}
labelClassName='modal_label'
inputClassName='modal_input'
inputWidth='150px'
inputHeight='28px'
inputMaxLength='50'
onFocus={this._handleFocus}
onFocusOut={this._handleFocusOutFirstName}
/>
</div>
<div className="modal_grid_item">
<EditableLabel text={this.state.activeUser.last_name}
labelClassName='modal_label'
inputClassName='modal_input'
inputWidth='150px'
inputHeight='28px'
inputMaxLength='50'
onFocus={this._handleFocus}
onFocusOut={this._handleFocusOutLastName}
/>
</div>
<div className="modal_grid_item">
<Select
options={options}
defaultValue={{value: this.state.activeUser.roles[0].id, label: this.state.activeUser.roles[0].name}}
styles={colourStyles}
onChange={this.selectChange}
/>
</div>
<div className="modal_input_label">
First Name
</div>
<div className="modal_input_label">
Last Name
</div>
<div className="modal_input_label">
Role
</div>
</div>
<div className="modal_grid_email">
<div className="modal_grid_item">
<EditableLabel text={this.state.activeUser.email}
labelClassName='modal_label'
inputClassName='modal_input'
inputWidth='350px'
inputHeight='28px'
inputMaxLength='50'
onFocus={this._handleFocus}
onFocusOut={this.changeEmail}
/>
</div>
<div className="modal_input_label">
Email
</div>
</div>
<h5>Reset Password</h5>
<div className="modal_grid_2 pass_grid">
<div className="modal_grid_item">
<input type="password" className="pass_input" onChange={this.originalPassChange}/>
</div>
<div className="modal_grid_item">
<input type="password" className="pass_input" onChange={this.confirmPassCheck}/>
</div>
<div className="modal_input_label">
Password
</div>
<div className="modal_input_label">
Confirm Password
</div>
</div>
</div>
}
</div>
<div className="modal_button_wrap">
<button className="cancel_button" onClick={() => this.closeModal()}>Cancel</button>
<button disabled={this.state.saveDisable} className="save_button" onClick={() => this.saveUser()}>Save</button>
<div className="error_msg">{this.state.errors}</div>
</div>
</div>
</Modal>
<Modal
isOpen={this.state.addModalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
shouldCloseOnOverlayClick={false}
parentSelector={this.getParent}
>
<div>
<div className="modal_header">Add User</div>
<div className="modal_inner_mat">
<div className="modal_grid_3">
<div className="modal_grid_item">
<EditableLabel text={this.state.addUserFirstName}
labelClassName='modal_label'
inputClassName='modal_input'
inputWidth='150px'
inputHeight='28px'
inputMaxLength='50'
onFocus={this._handleFocus}
onFocusOut={this._handleFocusOutAddFirstName}
/>
</div>
<div className="modal_grid_item">
<EditableLabel text={this.state.addUserLastName}
labelClassName='modal_label'
inputClassName='modal_input'
inputWidth='150px'
inputHeight='28px'
inputMaxLength='50'
onFocus={this._handleFocus}
onFocusOut={this._handleFocusOutAddLastName}
/>
</div>
<div className="modal_grid_item">
<Select
options={options}
defaultValue={options[0]}
styles={colourStyles}
onChange={this.addUserSelectChange}
/>
</div>
<div className="modal_input_label">
First Name
</div>
<div className="modal_input_label">
Last Name
</div>
<div className="modal_input_label">
Role
</div>
</div>
<div className="modal_grid_email">
<div className="modal_grid_item">
<EditableLabel text={this.state.newUserEmail}
labelClassName='modal_label'
inputClassName='modal_input'
inputWidth='350px'
inputHeight='28px'
inputMaxLength='50'
onFocus={this._handleFocus}
onFocusOut={this.changeAddEmail}
/>
</div>
<div className="modal_input_label">
Email
</div>
</div>
<h5>Set Password</h5>
<div className="modal_grid_2 pass_grid">
<div className="modal_grid_item">
<input type="password" className="pass_input" onChange={this.newPassSet}/>
</div>
<div className="modal_grid_item">
<input type="password" className="pass_input" onChange={this.confirmNewPassCheck}/>
</div>
<div className="modal_input_label">
Password
</div>
<div className="modal_input_label">
Confirm Password
</div>
</div>
{this.state.studentSelected &&
<div>
<h5>Assign Instructor</h5>
<div className="modal_grid_1">
<div className="modal_grid_item">
<Select
options={this.state.instructors}
defaultValue={this.state.instructors[0]}
styles={colourStyles}
onChange={this.instructorSelectChange}
/>
</div>
<div className="modal_input_label">
Instructor
</div>
</div>
</div>
}
</div>
<div className="modal_button_wrap">
<button className="cancel_button" onClick={() => this.closeAddUserModal()}>Cancel</button>
<button disabled={this.state.addSaveDisable} className="save_button" onClick={this.addUser}>Save</button>
<div className="error_msg">{this.state.addErrors}</div>
</div>
</div>
</Modal>
</div>
)
}
}
答案 0 :(得分：0)
您确定这条线吗？ users: data
数据来自哪里？
axios.get('/all-users').then(response => {
this.setState({
users: data,
})
})