Я пытаюсь создать свое первое простое приложение CRUD в React.У меня есть некоторые проблемы с формой редактирования.
Всякий раз, когда я отображаю форму редактирования с полями, заполненными значениями выбранной записи, мне нужно редактировать каждое поле, чтобы сохранить его обратно в базу данных.Если я не изменяю значения полей - включая идентификатор записи - или изменяю только одно значение, я получаю сообщение об ошибке: [GraphQL error]: Message: could not convert string to float: , Location: undefined, Path: undefined.Мне известно о том, что я могу добавить Mutation в Query, но у меня возникают проблемы с повторной загрузкой обновленного списка записей в родительском компоненте, и я все равно получаю сообщение об ошибке, упомянутое выше.
export class EditForm extends Component {
constructor(props) {
super(props);
this.state = {
id: '',
name: '',
price: '',
category: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange = (event) => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
};
updateSome = async () => {
const {id, name, price, category} = this.state;
await this.props.editOne({
variables: {
id,
name,
price,
category
},
refetchQueries: [{ query: ones }]
})
};
render() {
return (
<div>
<Query query={GET_ONE} variables={{one: Number(this.props.id)}}>
{({ loading, error, data, networkStatus }) => {
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
if (networkStatus === 4) return "Refetching!";
return (
<div>
{data.ones.map(one => (
<Form key={one.id}>
<Row>
<Col>
<Form.Group>
<Form.Label>ID</Form.Label>
<Form.Control
name='id'
defaultValue={one.id}
onChange={this.handleInputChange}
type="text"
placeholder="id"
/>
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Name</Form.Label>
<Form.Control
name='name'
defaultValue={one.name}
onChange={this.handleInputChange}
type="text"
placeholder="name"
/>
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Price</Form.Label>
<Form.Control
name='price'
defaultValue={one.price}
onChange={this.handleInputChange}
type="number"
step={0.01}
placeholder="price"
/>
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Category</Form.Label>
<Query query={twos}>
{({loading, error, data}) => {
if (loading) return <Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>;
if (error) return `Error! ${error.message}`;
return (
<Form.Control name='category'
defaultValue={one.category.id}
onChange={this.handleInputChange}
as="select"
placeholder="category"
>
{data.twos.map(two => (
<option key={two.id} value={two.id}>{two.category}</option>
))}
</Form.Control>
);
}}
</Query>
</Form.Group>
</Col>
</Row>
<ButtonToolbar>
<Button
variant="primary"
onClick={() => this.updateSome()}
>Update</Button>
</ButtonToolbar>
</Form>
))}
</div>
);
}}
</Query>
</div>
)
}
}
Как назначить начальные значения выбранной записи для this.state.id, this.state.name и т. Д. После отображения Component?Я знаю, как вручную ввести некоторые значения в this.state в constructor, но я хочу передать значения, отображаемые в полях формы, в this.state.