Javascript 如何在API更新时将参数从DataTable传递到表单？

我想更新React中的一行

我有一个数据表，它从一个API获取所有数据，它工作得很好。 当我单击update时，函数会将我重定向到表单页面，并在控制台上打印我选择的ID

更新作品

在这里您可以看到我的更新页面：

class UpdatePromo extends React.Component {

    emptyItem = {
        promoId: '',
        ijCod: '',
        title: '',
        description: ''
    };

    constructor(props) {
        super(props);
        this.state = {
            item: this.emptyItem
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        console.log('ID in UpdatePromo.jsx ', this.props.location.state.selectedIjCod);
        if (this.props.location.state.selectedId === -1) {
            this.props.history.push(`/admin/form_promo/-1`);
        }
        PromoCatalogService.filterById(PRIZES, this.props.location.state.selectedId)
            .then(response => this.setState({
                title: response.data.selectedTitle,
                description: response.data.selectedDescription
            }))
    }

    handleChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        let item = {...this.state.item};
        item[name] = value;
        this.setState({item});
    }

    async handleSubmit(event) {
        event.preventDefault();
        const {item} = this.state;

        await fetch('/http://localhost:3207/sjvodafoneservices/black/update', {
            method: (item.promoId) ? 'PUT' : 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(item),
        });
        this.props.history.push('/admin/promo_catalog');
    }

    render() {
        const data = this.props.location.state;
        const title = <h2>{data.selectedId ? 'Edit Promo' : 'Add Promo'}</h2>;

        return (
            <>
                <PanelHeader size="sm"/>
                <div className="content">
                    <Row>
                        <Col md="8">
                            <Card>
                                <CardHeader>
                                    {title}
                                </CardHeader>
                                <CardBody>
                                    <Form onSubmit={this.handleSubmit}>
                                        <FormGroup>
                                            <Label for="promoId">Promo ID</Label>
                                            <Input name="promoId" id="promoId"
                                                   type="text"
                                                   placeholder="Promo ID"
                                                   value={data.selectedId || ''}
                                                   onChange={this.handleChange} />
                                        </FormGroup>
                                        <FormGroup>
                                            <Label for="item">Item</Label>
                                            <Input type="text" name="item" id="item"
                                                   placeholder="Item"
                                                   value={data.selectedIjCod || ''}
                                                   onChange={this.handleChange} />
                                        </FormGroup>
                                        <FormGroup>
                                            <Label for="title">Title</Label>
                                            <Input type="text" name="title" id="title"
                                                   placeholder="Title"
                                                   value={data.selectedTitle || ''}
                                                   onChange={this.handleChange} />
                                        </FormGroup>
                                            <FormGroup>
                                                <Label for="description">Description</Label>
                                                <Input type="text" name="description" id="description"
                                                       placeholder="Description"
                                                       value={data.selectedDescription}
                                                       onChange={this.handleChange} />
                                            </FormGroup>
                                        <FormGroup>
                                            <Button color="primary" type="submit">Save</Button>{' '}
                                            <Button color="secondary" tag={Link}
                                                    to="/admin/form_promo">Cancel</Button>
                                        </FormGroup>
                                    </Form>
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </>
        );
    }

}

export default UpdatePromo;

我声明了一个空项，以便检查该项是新的还是要更新。 当我将ID记录到控制台时，它会显示为空，因为是emptyItem

---

如何传递我在数据表中已经选择的ID？

一种方法是将所选ID作为状态传递到this.props.history.push中的updatePromoClicked函数中

this.props.history.push({
       pathname: '/admin/form_promo/'+id,
       state: {'selectedId': id}
});

然后在更新页面中，您可以通过this.props.location.state.selectedId访问它并设置状态

---

希望这有帮助。

Hi@ravibagul91，谢谢，这很有帮助，但我无法打印所有字段，只能打印ID。为什么？因为我们已经传递了ID，状态：{'selectedId'：ID}。如果你想了解更多信息，也可以传递。哦，对不起，我没有输入正确的用户名，非常感谢@vipill。是的，我知道要添加其他参数。正如您在//编辑的行中看到的那样，我这样做了。在上传页面中，我得到了正确的Id，但没有为其他3个进行定义。@S.A.R.A.，我很高兴它帮助了你。谢谢@ravibagul91。

this.props.history.push({
       pathname: '/admin/form_promo/'+id,
       state: {'selectedId': id}
});