时间戳

首页 > 解决方案 > 将类组件更改为功能组件以修复“_id”未定义

javascript - 将类组件更改为功能组件以修复“_id”未定义

问题描述

我正在尝试将类组件更改为功能组件，以便我可以删除呈现在屏幕上的问题。我的主要关注点主要是deletedQuestion()。

import React, { useEffect, useState } from "react"
import Axios from "axios"
import { deleteQuestion } from './InputQuestionsFunctions'


export default function () {
    const [questions, setQuestions] = useState([])

    useEffect(() => {
        getQuestions()
    }, [])

    async function getQuestions() {
        try {

            const res = await Axios.get("http://localhost:5000/QuestionsRoute/me", {
                headers: { 'Authorization': `Bearer ${localStorage.getItem("usertoken")}` }
            })
            // if(res.status)
            setQuestions(res.data)
        }
        catch (e) {
            console.log("error while getting questions", e)
        }
    }

    const deletedQuestion = (e) => {
        e.preventDefault() 
        const removedQuestion = {
            id:_id
        }

        deleteQuestion(removedQuestion)
        .then(res => {this.props.history.push('/profile')
        })
    }


    const renderQuestions = () => {
        return questions.map(eachQuestion => {
            return (
                <div>
                    <button onClick={(e) => deletedQuestion(e)}
                        className="mdi mdi-delete mdi-24px lifeline-icon" />

                    <p> {eachQuestion.question}</p>

                    <p style={{ color: "blue" }}> {eachQuestion.answer}</p>

                </div >
            )
        })
    }
    return (
        <div>
            {renderQuestions()}
        </div>
    )
}

现在 _id 未定义，但理想情况下onClick={(e) => deletedQuestion(e)}会使用 id 删除特定问题。下面是导入的()供参考！

export const deleteQuestion = removedQuestion => {
    const body = {
        id:removedQuestion._id
    }
    const options = {
        headers: { 'Authorization': `Bearer ${localStorage.getItem("usertoken")}` }
    };
    return axios

        .delete(
            process.env.REACT_APP_SERVER + '/QuestionsRoute/me/_id',
            body,
            options
        ).then(res => {
            console.log('Deleted')
        })
}

我是新手，非常感谢编辑后的代码，但感谢您的帮助！

标签： javascriptreactjs

解决方案

您可以在致电时访问该问题，.map因此请通过deletedQuestion：

    const deletedQuestion = (e, question) => {
        e.preventDefault() 
        const removedQuestion = {
            id: question._id
        }
        deleteQuestion(removedQuestion)
          .then(res => {this.props.history.push('/profile')
        })
    }

...

<button onClick={(e) => { deletedQuestion(e, eachQuestion); }}

推荐阅读