REST API에서 동적으로 얻은 목록 항목 그룹에서 목록 항목을 삭제하려고합니다. axios 요청으로 BACKEND에서 목록 항목을 삭제할 수 있지만 실제 목록 항목 표시가 더 이상 표시되지 않도록 페이지를 새로 고쳐야합니다. UI에서 목록 항목을 삭제하여 삭제를 누르면 백엔드와 프런트 엔드에서 모두 삭제됩니다. 알아낼 수없는 것 같고 여러 가지 방법을 시도했습니다.
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
loading: false,
value: '',
open: false
};
this.toggle = this.toggle.bind(this);
}
search = async val => {
this.setState({ loading: true });
let res = await search(
`https://zuul-stage.whatifops.com/v1/user/phone/${val}`
);
this.setState({ users: res, loading: false });
};
onChangeHandler = async e => {
this.search(e.target.value);
this.setState({ value: e.target.value });
};
toggle() {
this.setState({
open: !this.state.open
});
}
get renderUsers() {
let users = <h1 />;
if (!this.state.loading) {
users = this.state.users.map(user => (
<div>
<Row>
<Col lg={2} style={{ maxWidth: '9.7%' }}>
<Button
color='danger'
style={{ paddingTop: 12, paddingBottom: 12 }}
onClick={this.toggle}
>
<i className='fa fa-trash'></i> Delete
</Button>
</Col>
<Col lg={10}>
<ListGroup>
<ListGroupItem key={user.id} value={user.value} id={user.id}>
<strong>Email:</strong> {user.email}
<strong>Phone:</strong> {user.phone}
</ListGroupItem>
</ListGroup>
</Col>
</Row>
<br />
<Modal
isOpen={this.state.open}
toggle={this.toggle}
className={'modal-danger'}
>
<ModalHeader toggle={this.toggleSuccess}>Delete User</ModalHeader>
<ModalBody>
<Row>
<Col
lg={2}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#f86c6b'
}}
>
<i className='fa fa-warning fa-3x'></i>
</Col>
<Col lg={10}>
Are you sure you want to delete the user with the following
credentials:
<br />
<br />
<span>
{' '}
<strong>
<i className='fa fa-envelope'></i> Email:
</strong>{' '}
{user.email}
</span>
<br />
<span>
{' '}
<strong>
<i className='fa fa-phone'></i> Phone:
</strong>{' '}
{user.phone}
</span>
</Col>
</Row>
<br />
</ModalBody>
<ModalFooter>
<Button color='danger' onClick={this.open}>
Delete
</Button>
<Button color='secondary' onClick={this.open}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
));
} else {
return <p>Loading...</p>;
}
return users;
}
render() {
return (
<div>
<div className='display-4'>Users</div>
<hr />
<Row>
<Col lg={12}>
<Label>Enter an email or phone number:</Label>
</Col>
</Row>
<Row>
<Col lg={12}>
<Input
value={this.state.value}
onChange={e => this.onChangeHandler(e)}
placeholder='Begin typing to search'
/>
</Col>
</Row>
<br />
{this.renderUsers}
</div>
);
}
}
export default App;
모두 감사하겠습니다. 감사!
** 업데이트 된 코드 :
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
loading: false,
value: '',
open: false
};
this.toggle = this.toggle.bind(this);
}
search = async val => {
this.setState({ loading: true });
let res = await search(
`https://zuul-stage.whatifops.com/v1/user/phone/${val}`
);
this.setState({ users: res, loading: false });
};
onChangeHandler = async e => {
this.search(e.target.value);
this.setState({ value: e.target.value });
};
toggle() {
this.setState({
open: !this.state.open
});
}
onDelete(e) {
let id = e.target.id;
let updatedUsers = this.users.filter(user => user.id != id);
this.setState({ users: updatedUsers });
}
get renderUsers() {
let users = <h1 />;
if (!this.state.loading) {
users = this.state.users.map(user => (
<div>
<Row>
<Col lg={2} style={{ maxWidth: '9.7%' }}>
<Button
color='danger'
style={{ paddingTop: 12, paddingBottom: 12 }}
onClick={this.onDelete(user.id)}
>
<i className='fa fa-trash'></i> Delete
</Button>
</Col>
<Col lg={10}>
<ListGroup>
<ListGroupItem key={user.id} value={user.value} id={user.id}>
<strong>Email:</strong> {user.email}
<strong>Phone:</strong> {user.phone}
</ListGroupItem>
</ListGroup>
</Col>
</Row>
<br />
<Modal
isOpen={this.state.open}
toggle={this.toggle}
className={'modal-danger'}
>
<ModalHeader toggle={this.toggleSuccess}>Delete User</ModalHeader>
<ModalBody>
<Row>
<Col
lg={2}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#f86c6b'
}}
>
<i className='fa fa-warning fa-3x'></i>
</Col>
<Col lg={10}>
Are you sure you want to delete the user with the following
credentials:
<br />
<br />
<span>
{' '}
<strong>
<i className='fa fa-envelope'></i> Email:
</strong>{' '}
{user.email}
</span>
<br />
<span>
{' '}
<strong>
<i className='fa fa-phone'></i> Phone:
</strong>{' '}
{user.phone}
</span>
</Col>
</Row>
<br />
</ModalBody>
<ModalFooter>
<Button color='danger' onClick={this.open}>
Delete
</Button>
<Button color='secondary' onClick={this.open}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
));
} else {
return <p>Loading...</p>;
}
return users;
}
render() {
return (
<div>
<div className='display-4'>Users</div>
<hr />
<Row>
<Col lg={12}>
<Label>Enter an email or phone number:</Label>
</Col>
</Row>
<Row>
<Col lg={12}>
<Input
value={this.state.value}
onChange={e => this.onChangeHandler(e)}
placeholder='Begin typing to search'
/>
</Col>
</Row>
<br />
{this.renderUsers}
</div>
);
}
}
export default App;
this.state.users에서 사용자를 삭제하고 싶은 것 같습니다. 다음과 같이 할 수 있습니다.
onDelete(id){
let updatedUsers = this.users.filter(user=>user.id!=id)
this.setState({users:updatedUsers })
}아직없는 경우 각 사용자에게 ID를 추가해야합니다.
내 제안은 API 호출을 한 번 성공한 경우에만 프런트 엔드에서 삭제하므로 API 성공 콜백에이 코드를 추가 할 수 있습니다. 따라서 삭제 호출이 실패하면 프런트 엔드에서도 삭제하지 마십시오.
onClick={() => this.onDelete(user.id)}
이것이 onDelete를 첨부하는 방법입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다