无法在 ReactJS 中将 reponse.data 转换为字符串

Question

import React, { Component } from 'react'
import TaskOneServices from '../services/TaskOneServices'
import circle from '../assets/icons/dry-clean.png'
import tick from '../assets/icons/check-mark.png'

async function showImage (taskId)  {

    var getStatus = (await TaskOneServices.getStatus(taskId))?.data;

    JSON.stringify(getStatus);

    console.log(typeof(getStatus)); //prints object

    console.log(getStatus === "CREATED"); //prints false

    if(getStatus === "CREATED") {
        return (
            <img className="img-lm" src={circle} alt="bullets" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } else {
        return (
            <img className="img-lm" src={tick} alt="checked" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } 
    
}

function taskCompleted(e, taskid) {
    if(e.target.getAttribute('src') === circle) {
        e.target.setAttribute( 'src', tick);
        e.target.setAttribute( 'alt', 'checked');
        updateTask(taskid);
        // strikeThroughFn(taskid);
    } else {
        e.target.setAttribute( 'src', circle);
        e.target.setAttribute( 'alt', 'bullets');
        updateTask(taskid);
    }
    }

    function updateTask(id) {

        JSON.stringify(id);
        TaskOneServices.updateTask(id).then((response) => {
            console.log(response)
        });
    }

export default class TaskListComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            task_one:[],
        }

        this.deleteTask = this.deleteTask.bind(this)
        // this.updateTask = this.updateTask.bind(this)
    }
    //------- showing error -------------
    componentDidMount() {
        TaskOneServices.getTasks().then((response) => {
            this.setState({task_one: response.data})
        });
    }
    //------- showing error -------------

    deleteTask = (id) => {
        
        JSON.stringify(id);
        TaskOneServices.deleteTask(id).then((response) => {
            this.refreshPage();
        });
    }
    
    refreshPage = () => {
        window.location.reload();
    }

    strikeThroughFn(taskid) {
        // JSON.stringify(taskString);
        console.log(taskid);
        var fetchTask = document.getElementById('strikeTask');
        fetchTask.innerHTML = <strike> + {taskid} + </strike>
    }

    render() {
        return (
            <div className="container-fluid bg-white">
                <div className="row">
                    <table className="table border-bottom table-pad">
                        <tbody>
                        {
                            this.state.task_one.map(
                                task =>
                                <tr key = {task.id}>
                                    <td width="60px">
                                         {showImage(task.id)}
                                    </td>
                                    <td id="strikeTask">{task.task}</td>
                                    <td width="60px">
                                        <button type="button" className="close text-danger btn-close-style" onClick={() => this.deleteTask(task.id)}>
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </td>
                                </tr>
                            )
                        }
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

我想比较 getStatus 和字符串“CREATED”，如果两者相等，我想 return 内部代码块。但是 getStatus 有一个对象类型，“CREATED”是一个字符串。所以它 return 是错误的。我试过 JSON.stringify() 但它仍然 return 是错误的。有什么方法可以将该对象转换为字符串？

Answer 1

您使用的是 promise，因此 .then() 将在您的函数之后触发，您希望等待 promise 的结果，因此请将 await 关键字与异步函数一起使用。请记住，异步函数 return 也是一个 promise

async function showImage (taskId)  {

    var getStatus = (await TaskOneServices.getStatus(taskId))?.data;

    JSON.stringify(getStatus);

    console.log(typeof(getStatus)); //prints object

    console.log(getStatus === "CREATED"); //prints false

    if(getStatus === "CREATED") {
        return (
            <img className="img-lm" src={circle} alt="bullets" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } else {
        return (
            <img className="img-lm" src={tick} alt="checked" onClick={(ev) => {taskCompleted(ev, taskId)}}/>
        )
    } 
    
}

无法在 ReactJS 中将 reponse.data 转换为字符串

Cannot convert reponse.data to string in ReactJS

javascript

mongodb

reactjs

spring-boot

bootstrap-4