Question

此刻我只是在学习反应，我建立了一个布局页面，然后使用组件显示图像。在组件内部，每个图像都有一个按钮。此按钮将从API中删除图像。

但是，尽管API调用正在运行，并且图像已从数据库中删除，但它并未从布局中删除该图像组件。

我正在使用axios与API进行交互。任何帮助将不胜感激。

我的布局代码如下；

import React, { Component } from "react";
import axios from 'axios';
import ImageComponent from './components/ImageComponent';

class ImageOverview extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imageData: []
        };
    }

    componentDidMount() {
        axios.get('http://api.com/getAllImages')
            .then(res => {
                const imageData = res.data;
                this.setState({ imageData });
            })
    }

    render() {
        return (
            <>
                <div className="content">
                    <Row>
                        <Col lg="12">
                            <Card>
                                <CardBody>
                                    <Row>
                                        { this.state.imageData.map(image =>
                                            <ImageComponent
                                                key={image.id}
                                                image={image}
                                            />
                                        )}
                                    </Row>
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </>
        )
    }
}

export default ImageOverview;

我的组件代码在这里；

import React, { Component } from "react";
import axios from 'axios';

class ImageComponent extends Component {

    deleteImage(id)
    {
        axios.delete('http://api.com/deleteimage' + id)
            .then(res => {
                console.log(res);
            })
    }

    render() {
        const { image } = this.props;

        return (
            <>
                <Col className="col-xs-6 col-xs-6">
                    <Card className="h-80">
                        <CardImg top width="100%" src={'http://imagelocation.com/' + image.filename} alt="Card image cap" />
                        <CardBody>
                            <Button color="danger" size="sm" onClick={() => this.deleteImage(image.id)}><i className="icon-simple-remove" /> Delete</Button>
                        </CardBody>
                    </Card>
                </Col>
            </>
        )
    }
}

export default ImageComponent;

Answer 1

您需要实际更新属于Layout组件的状态。具体来说，您需要从imageData数组中删除特定图像。这将触发重新渲染组件以反映您的更改。

在 Layout.js 中，创建一个将删除特定图像的事件处理程序：

deleteImageInState = (id) => {
   const { imageData } = this.state
   const newImageData = imageData.filter((img) => img.id !== id)
   this.setState({
     imageData: newImageData
   })
}

上面的函数只是创建一个新的imageData列表，其中将不包含已删除的图像。

然后将该函数作为道具传递给您的ImageComponent，就像您在.map()逻辑中一样。

<ImageComponent 
    key={image.id} 
    image={image} 
    deleteImageInState ={this.deleteImageInState}
/>

最后更新您在 ImageComponent.js 中定义的deleteImage函数，以在删除时调用prop更改处理程序。

deleteImage = (id) => {
    axios.delete('http://api.com/deleteimage' + id)
        .then(res => {
            this.props.deleteImageInState(id)
        })
 }

Answer 2

在父组件deleteImage(id)中添加ImageOverview方法，并将其作为道具传递给子ImageComponent：

<ImageComponent key={image.id} image={image} deleteHandler={this.deleteImage.bind(this}} />

在deleteImage(id)调用this.setState()中，一旦删除了图像，就会触发重新渲染，这就是您在没有state至setState()进行更改的情况下所缺少的该组件将不会使用新数据重新渲染：

deleteImage(id)
    {
        axios.delete('http://api.com/deleteimage' + id)
            .then(res => {
                this.setState({}) //delete the image from imageData array
            })
    }

您可以在子组件中按以下方式调用deleteImage(id)：

<CardBody>
        <Button color="danger" size="sm" onClick={() => this.props.deleteHandler(image.id)}><i className="icon-simple-remove" /> Delete</Button> 
</CardBody>

按下按钮后，React组件未更新

2 个答案: