从API更新时如何将参数从DataTable传递到Form？

Question

I would like to update a row in React.

I've got a data table that gets all of the data from an API, it works well. When I click on update, the function redirects me to the form page and prints on console the ID that I chose.

UPDATE WORKS

class PromoCatalog extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            promos: [],
            message: null
        };
        this.updatePromoClicked = this.updatePromoClicked.bind(this);
        this.refreshPromo = this.refreshPromo.bind(this);
    }

    componentDidMount() { //React defines a component lifecycle
        this.refreshPromo();
    }

    refreshPromo() {
        PromoCatalogService.retrieveAllPromo(PRIZES)//this would make the call to the REST API.
            .then(
                response => {
                    console.log(response);
                    this.setState({promos: response.data.shopping})
                }
            )
    }

    PromoOffClicked(id) {
        PromoCatalogService.promoOff(PRIZES, id)
            .then(
                response => {
                    console.log(response);
                    this.setState({message: `Promo ${id} OFF  Successful`});
                    this.refreshPromo();
                }
            )

    }

    updatePromoClicked(id, ijCod, title, description) {
        console.log('clicked id ' + id);

        this.props.history.push({
            pathname: '/admin/form_promo/'+ id,
            state: {'selectedId': id,
                'selectedIjCod': ijCod,
                'selectedTitle': title,
                'selectedDescription': description}
        })
    }

    addCourseClicked() {
        this.props.history.push(`/admin/form_promo/-1`);
    }


    render() {
        let promos = this.state.promos.map((item) => ({
            promoId: item.promoId,
            ijCod: item.ijCod,
            title: item.title,
            description: item.description,
            delete: <MDBBtn outline color="danger"
                            onClick={() => this.PromoOffClicked(item.promoId)}>OFF</MDBBtn>,
            update: <MDBBtn outline color="info"
                            onClick={() => this.updatePromoClicked(item.promoId, item.ijCod, item.title, item.description)}>Update</MDBBtn>         
        }));
        const data = {
            columns: [
                {
                    label: 'Id',
                    field: 'promoId',
                    sort: 'asc',
                    width: 150
                },
                {
                    label: 'Ij Cod',
                    field: 'ijCod',
                    sort: 'asc',
                    width: 270
                },
                {
                    label: 'Title',
                    field: 'title',
                    sort: 'asc',
                    width: 200
                },
                {
                    label: 'Description',
                    field: 'description',
                    sort: 'asc',
                    width: 270
                },
                {
                    label: 'Delete',
                    field: 'delete',
                    width: 100
                },
                {
                    label: 'Update',
                    field: 'update',
                    width: 100
                }
            ],
            rows: promos
        };

        return (
            <>
                <PanelHeader size="sm"/>
                <div className="content">
                    <Row>
                        <Col xs={12}>
                            <Card>
                                <CardHeader>
                                    <CardTitle tag="h4">Promo Catalog</CardTitle>
                                </CardHeader>
                                <CardBody>
                                    <MDBDataTable
                                        striped
                                        bordered
                                        small
                                        data={data}
                                    />
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </>
        );
    }
}

export default PromoCatalog

Here you can see my Update Page:

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;

I declared an empty item so I can check if the item is new or is to update. When I log the ID to the console it shows me empty beacuse of the emptyItem.

How can I pass the ID that I already chose in the data table?

Answer 1

One way to do that would be to pass the selected id as a state in this.props.history.push() in your updatePromoClicked() function.

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

Then in your Update page, you can access it as this.props.location.state.selectedId and set the state.

Hope this helps.