javascript - 按下按钮时 React 组件不更新

Question

我现在刚刚学习react，我已经构建了一个布局页面，然后使用组件显示图像。在组件内部，每个图像都有一个按钮。此按钮将从 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

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

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

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

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

然后将该函数作为 prop 传递给您的 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)
        })
 }