입력 필드 초기화

[김수현]

'퀴즈전송' 버튼을 누르면 입력 필드가 초기화가 되게 했는데요.
option값은 초기화가 되는데, question값과 answer값은 초기화가 되지 않습니다.
확인 부탁드려요.
================================

'use client'
import { useState, useEffect } from 'react'
import { getSession } from 'next-auth/react'

export default function Add(props) {
    let [question, setQuestion] = useState('')
    let [option, setOption] = useState([])
    let [answer, setAnswer] = useState('')
    let [data, setData] = useState([])
    const [message, setMessage] = useState(null);
    const [sessionEmail, setSessionEmail] = useState(null);
    const [input, setInput] = useState('');
    const [isInputFocused, setInputFocused] = useState(false);

    useEffect(() => {
        getSession().then(session => {
            setSessionEmail(session?.user?.email || null);
            fetch('/api/add/list?id=' + props._id)
                .then(r => r.json())
                .then(result => {
                    console.log(result)
                    setData(result)
                })
        });
    }, [])

    const handleKeyDown = (evt) => {
        if (["Enter", "Tab", ","].includes(evt.key)) {
            evt.preventDefault();
            var value = input.trim();
            if (value && isValid(value)) {
                setOption([...option, input]);
                setInput("");
            }
        }
    }
    const isValid = (input) => {
        return option.indexOf(input) === -1;
    }
    const handleDelete = (item) => {
        setOption(option.filter(i => i !== item));
    }

    const handleAddClick = () => {
        var value = input.trim();
        if (value && isValid(value)) {
            setOption([...option, value]);
            setInput("");
            setInputFocused(false);
        }
    };

    return (
        <div>
            <hr />
            {data.length > 0 ?
                data.map((a, i) =>
                    <div key={i}>
                        <p>{a.question}</p>
                        <p>{Array.isArray(a.option) ? a.option.join(', ') : a.option}</p>
                        <p>{a.answer}</p>
                        <p key={i}>{a.content}
                            {a.author === sessionEmail &&
                                <span onClick={(e) => {
                                    fetch('/api/add/delete', {
                                        method: 'DELETE',
                                        body: JSON.stringify({ _id: a._id })
                                    })
                                        .then(r => r.json())
                                        .then(result => {
                                            if (result === '삭제완료') { // 응답 본문의 메시지가 '삭제완료'인지 확인
                                                // 삭제 요청이 성공하면, 삭제한 댓글을 data 배열에서 제거
                                                setData(prevData => prevData.filter(item => item._id !== a._id));
                                            } else {
                                                setMessage('댓글 삭제에 실패했습니다.'); // 에러 메시지 업데이트
                                            }
                                        })
                                        .catch((err) => {
                                            console.err('error:', err);
                                        });
                                }}>☒</span>
                            }</p>
                    </div>
                )
                : '퀴즈 없음'
            }
            {message && <div>{message}</div>}
            <input placeholder="질문" onChange={(e) => { setQuestion(e.target.value) }} />
            <div className="input-tag">
                <ul className="input-tag__tags">
                    {option.map((tag, i) => (
                        <li key={tag}>
                            {tag}
                            <button type="button" onClick={() => { handleDelete(tag) }}>X</button>
                        
                    ))}
                    <li className="input-tag__tags__input">
                        <input type="text" value={input} onChange={(e) => setInput(e.target.value)}
                            onKeyDown={handleKeyDown}
                            onFocus={() => setInputFocused(true)}
                            onBlur={() => setInputFocused(false)}
                        />     {/* 'V' 버튼이 항상 보이도록 수정 */}

                        <button type="button" onClick={handleAddClick}>V</button>
                    

                
            </div>
            <input placeholder="정답" onChange={(e) => { setAnswer(e.target.value) }} />
            <button onClick={async () => { // async를 추가합니다.
                console.log({ question, option, answer, _id: props._id });
                const res = await fetch('/api/add/new', { // await를 추가합니다.
                    method: "POST",
                    body: JSON.stringify({ question: question, option: option, answer: answer, _id: props._id })
                });
                const result = await res.json(); // await를 추가합니다
                setData([...data, result])
                setQuestion('');
                setOption([]);
                setAnswer('');
                setInput('');
            }}

            >퀴즈전송</button>
        </div >
    )
}

[codingapple]

answer랑 question state를 html에서 안쓰고있는듯요

[글쓴이]

글