刪除 Reactjs 中的 API 調用

Question

我的方法：

 deleteSample = () => {
        this.sampleService
          .deleteCall(this.props.id)
          .then((response) => {
             window.location.reload(false);
            })

          .catch((error) => {
            console.log(error);
          });
      };

服務 Class：

 deleteCall(id: string): Promise<{}> {
    const URL = `${this.ENDPOINT}/${id}`;
    return http
      .delete(apiURL)
      .then((response) => {
        return response.data;
      })
      .catch((error) => {
        throw error;
      });
  }

零件：

<Button onClick={this.deleteSample}
            >
              Delete
            </Button>

單擊按鈕時，我想刪除該項目。 刪除工作，但只有在刷新頁面后。我不想使用window.location.reload(false); 刷新頁面但想刪除項目而不刷新。 誰能幫我這個

Answer 1

我准備了一個例子。 在這里，我調用 delete api 並在收到響應后，從列表中刪除了已刪除的項目。

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPage() {
    const [posts, setPost] = useState([]);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        let isSubscribed = true;
        axios.get('https://jsonplaceholder.typicode.com/posts', {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    function deletePost(postId){
        axios.get('https://jsonplaceholder.typicode.com/posts/' + postId, {
            cancelToken: signal.token,
        })
            .then(res => {
                console.log(res , 'res');
                setPost(posts.filter(p => p.id !== postId));
            }).catch(err => {
            console.log(err);
        });
    }

    return (
        <React.Fragment>
            <ul>
                {
                    posts.map(post => <div><span key={post.id}>{post.title}</span> <button onClick={() => deletePost(post.id)}>Delete</button></div>)
                }
            </ul>
        </React.Fragment>
    );
}
export default PostListPage;