我正在尝试使用与添加新客户相同的表格来编辑客户。我正在使用react语义ui形式。
在“客户”类中，在“编辑”上单击，它将调用onEditCustomer并从数据库中获取该客户详细信息。之后，我将提取的客户分配给“ singleCustomer”，并希望传递到AddCustomer表单，以便我可以在此处编辑客户详细信息 但在
上呈现给我错误customerForm =
<AddCustomer onAddFormSubmit={this.onAddFormSubmit} singleCustomer={this.state.singleCustomer}/>
错误/警告是
> Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might
indicate a bug in your application. Instead, assign to `this.state` directly or define a `state =
{};` class property with the desired state in the AddCustomer component.
in AddCustomer (at Customer.js:128)
in Customer (at App.js:10)
in App (at src/index.js:7)
import React from 'react';
import { Table, Button } from 'semantic-ui-react';
import AddCustomer from './AddCustomer';
export default class Customer extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
formClose:false,
isAddCustomer:false,
isEditCustomer:false,
singleCustomer:[],
users: []
}
}
//fetch data
componentDidMount() {
const customerApi = 'https://localhost:44387/api/Customers';
const myHeader = new Headers();
myHeader.append('Content-type', 'application/json');
myHeader.append('Accept', 'application/json');
myHeader.append('Origin','https://localhost:44387');
const options = {
method: 'GET',
myHeader
};
fetch(customerApi, options)
.then(res => res.json())
.then(
(result) => {
this.setState({
users: result,
isLoaded: true
});
},
(error) => {
this.setState({
isLoaded: false,
error
});
}
)
}
//New Customer record
onAddFormSubmit = data => {
const customerApi = 'https://localhost:44387/api/Customers';
const myHeader = new Headers({
'Accept':'application/json',
'Content-type':'application/json'
});
fetch(customerApi,{
method:'post',
headers:myHeader,
body:JSON.stringify(data)
})
.then(res => res.json())
.then(
(result) => {
this.setState({
users:result
})
},(error) => {
this.setState({ error });
}
)
}
//Edit customer record
onEditCustomer = custId => {
const customerApi = 'https://localhost:44387/api/Customers/'+custId;
const myHeader = new Headers({
'Accept':'application/json',
'Content-type':'application/json; charset=utf-8'
});
fetch(customerApi,{
method:'GET',
headers:myHeader
})
.then(res => res.json())
.then(
(result) => {
this.setState({
singleCustomer:result,
isEditCustomer:true,
isAddCustomer:true
})
},(error) => {
this.setState({ error });
}
)
}
//Delete Customer
onDeletCustomer = customerId => {
const{users} = this.state;
this.setState({
users: users.filter(customer => customer.customerId !== customerId)
});
}
render() {
const { users } = this.state;
console.log("Edit customer");
let customerForm;
if (this.state.isEditCustomer || this.state.isAddCustomer){
customerForm = <AddCustomer onAddFormSubmit={this.onAddFormSubmit} singleCustomer=
{this.state.singleCustomer}/>
}
return (
<div>
{customerForm}
<Table celled textAlign='center'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Address</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body >
{
users.map(user => (
<Table.Row key={user.customerId}>
<Table.Cell>{user.customerId}</Table.Cell>
<Table.Cell>{user.name}</Table.Cell>
<Table.Cell>{user.address}</Table.Cell>
<Table.Cell>
<Button color='blue' onClick =
{()=>this.onEditCustomer(user.customerId)}>Edit</Button>
</Table.Cell>
<Table.Cell>
<Button color='red' onClick =
{()=>this.onDeletCustomer(user.customerId)}>Delete</Button>
</Table.Cell>
</Table.Row>
))
}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='5'>
No of Pages
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
</div>
)
}
}
In AddCustomer I want to set data to form but my form is not opeing.
import React from 'react';
import { Button, Form, Modal } from 'semantic-ui-react';
export default class AddCustomer extends React.Component {
constructor(props) {
super(props);
this.state = {
showCreateForm: false,
id: '',
name: '',
address: '',
formData: {}
}
if (props.customer) {
console.log("Add customer constructor")
this.setState({showCreateForm:true})
this.state.formData = props.customer;
}else{
this.setState({showCreateForm:false})
}
}
handleChangeName = event => {
const value = event.target.value;
console.log(value);
this.setState({ formData: { name: value, address: this.state.formData.address } });
//name: ""
//address: ""
console.log(this.state.formData);
}
handleChangeAddress = event => {
const value = event.target.value;
console.log(value);
this.setState({ formData: { name: this.state.formData.name, address: value } });
//name: "ram" but now there is no address in formData
console.log(this.state.formData);
}
handleSubmit = event => {
event.preventDefault();
this.setState({
formData: {
name: this.state.name, address: this.state.address
}
});
this.props.onAddFormSubmit(this.state.formData);
}
//On cancel button click close Create user form
closeCreateForm = () => {
this.setState({ showCreateForm: false })
}
//Open Create new Customer form
openCreateCustomer = () => {
this.setState({ showCreateForm: true })
}
render() {
let formTitle;
if (this.state.id) {
formTitle = "Edit Customer";
} else {
formTitle = "New Customer";
}
return (
<div>
<Modal closeOnTriggerMouseLeave={false} trigger={
<Button color='blue' onClick={this.openCreateCustomer}>
{formTitle}
</Button>
} open={this.state.showCreateForm}>
<Modal.Header>
Create customer
</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Name</label>
<input type="text" placeholder='Name' name="name"
value={this.state.name}
onChange={this.handleChangeName} />
</Form.Field>
<Form.Field>
<label>Address</label>
<input type="text" placeholder='Address' name="address"
value={this.state.address}
onChange={this.handleChangeAddress} />
</Form.Field>
<br />
<Button type='submit' floated='right' color='green'>Create</Button>
<Button floated='right' onClick={this.closeCreateForm}
color='black'>Cancel</Button>
<br />
</Form>
</Modal.Content>
</Modal>
</div>
)
}
}