发送删除请求后重新呈现反应不起作用

时间:2017-10-18 02:38:44

标签: node.js reactjs fetch

我在前端有React.js,在后端有Express.js。目前我正在尝试使用删除请求从React中删除帖子并且它可以工作,但是我必须转到URL并在删除后显示新列表之前按Enter键。我希望页面能够重新渲染,而不必点击刷新。

class Rentals extends Component {

    constructor(props) {
        super(props);
        this.state = {
            completelist: [],
            apiLoaded: false,
        }
        this.conditionalRentList = this.conditionalRentList.bind(this);
        this.handleDeleteButton = this.handleDeleteButton.bind(this);
        this.fetchAllRentals = this.fetchAllRentals.bind(this);
    }

    componentDidMount() {
        this.fetchAllRentals();
    }

    fetchAllRentals() {
        fetch('api/listofrentals')
            .then((res) => {
                return res.json()
            })
            .then((fullrental) => {
                this.setState((prevState) => {
                    return {
                        completelist: fullrental.rentalsData,
                        apiLoaded: true
                    }
                })
            })
    }

    conditionalRentList() {
        if (this.state.apiLoaded === true) {
            return (
                <RentalsComp
                    completelist={this.state.completelist}
                    handleDeleteButton={this.handleDeleteButton}
                />
            );
        } else {
            return <p> Loading </p>
        }
    }

    handleDeleteButton(idToBeDeleted) {
        fetch(`api/listofrentals/${idToBeDeleted}`, {
            method: 'DELETE'
        }).then((res) => {
            if (res.json === 200) {
                this.fetchAllRentals();
            }
        })
    }

}

函数handleDeleteButton应该获取所有列表并在不必刷新的情况下呈现它,因为它调用fetchAllRentals函数但由于某种原因它不起作用。

1 个答案:

答案 0 :(得分:0)

原本应该是resp.status === 200,而是在做resp.json === 200而不是。