[React] + express + mariadb /post insert 하기

inputComp.js 

추가할 input 값 App.js 로 넘겨주기 

import '../css/InputComp.css';
import { Component } from 'react';

class InputComp extends Component{
    constructor(props){
        super(props)
        this.state={
            id:'',
            todo:''
        }
    }
    addTodoList=()=>{
        alert('추가(InputComp)')
        // const {id} = this.props+1
        const {id} = this.props.id+1
        // alert('추가할 id ' + this.props+1)
        alert('추가할 id ' + id)
        const{todo} = this.state
        this.props.addTodoList(id,todo)
    }
    todoChange=(e)=>{
        console.log(e.target.value)
        this.setState({
            todo:e.target.value
        })
    }

    render(){
        return(
            <div id='input-comp'>  
            <h2>To Do List</h2>
                <input className='input' type='text' placeholder='할일입력'
                onChange={this.todoChange}/>
                <button className='add-btn' onClick={this.addTodoList}>추가</button>
            </div>
        )
    }
}

export default InputComp;

 

 

server.js 에 쿼리문 작성

app.post('/inputPost', (req, res) => {
    const todo = req.body.todo; // 클라이언트에서 전달된 할일 정보
    db.query('INSERT INTO `YEO`.`todolist` (`todo`) VALUES (?)', [todo], (err, result) => {
        if (err) {
            console.error('할일 추가 실패:', err);
            res.status(500).json({ error: '할일 추가 실패' });
        } else {
            console.log('할일 추가:', result);
            res.status(200).json({ todo }); // 추가한 할일을 클라이언트에 응답으로 전달
        }
    });
});

 

 

App.js 에 server.js 와 연동 

    addTodoList = (id, todo) => {
        alert('추가(App)')
        alert('넘어온 id : ' + (this.state.todolist.length + 1))
        //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함
        alert('넘어온 할일 : ' + todo)

        id = this.state.todolist.length + 1

        const todoObj = {id: id, todo: todo}

        // POST 요청 보내기
        axios
            .post('http://localhost:4000/inputPost', todoObj)
            .then(response => {
                console.log('할일 추가:', response.data);
                // 추가한 할일을 현재 상태에 추가
                const addedTodo = response.data;
                const updatedList = this.state.todolist.concat(addedTodo);
                this.setState({todolist: updatedList});
            })
            .catch(error => {
                console.error('할일 추가 실패:', error);
            });
    }

 

App.js return 에도 적어주기 

        return (
            <div id='App'>
                <InputComp id={this.state.todolist.length} addTodoList={this.addTodoList}/>
                {result}
            </div>

 

 

 

insert 성공 

 

key값때문에 console에 계속 key값이 없다고 경고문이 뜨는데 

inputComp.js 에서 id 값을 id+1 해주니까 해결이 됨 

const {id} = this.props.id+1