Блог

Итак, я пытаюсь передать это значение индекса в функцию removeNote. Но он выдает ошибку, и я, похоже, не могу ее понять. Та же структура работает в add note, но когда я пытаюсь запустить ее в remove note здесь, мне нужен дополнительный аргумент, и я, похоже, не могу этого сделать.

Основной метод, который вызывает проблемы, заключается в том, что метод removeNote Я просто хочу получить индекс, а затем он отправляет данные на мой node.js сервер, который удаляет заметку из MongoDB.

 import React ,{useEffect, useState} from 'react';
import axios from 'axios'; 
import Navbar from './Navbar'
import './Notes.css'
function Notes(){

//This is just a string because we are sending just one 
//might have to make it an array at some point
const[notes , setNote] = useState(String) ; 
const[index, setIndex] = useState(); 

var dataArr = [] ; 

const [dataSet , setDataSet] = useState([]); 
const [dataList, setDataList] = useState(); 

useEffect(() =>{
    console.log("Use Effect Notes.js");

    axios.post('/api/user/notes' ).then(res=>{
        dataArr = res.data[0].notes ; 
        //console.log(dataArr) ;
        console.log(dataArr); 
        setDataSet(res.data[0].notes); 
       
    }).catch(err=>{
        console.log('it didnt work'   err); 
    }); 

    console.log("The array that i got ");
}, []) ;

const DataList = dataSet.map((element, index)=>{
    return <div className ="row justify-content-center">
        <div class="col-md-8 text-left"> 
        <h1 style={{color:"white" , fontSize: "30px"  }}> {index}. {element}</h1>

        <button className="btn btn-secondary" onClick={removeNote(index)}>Delete</button>
        </div>
        </div>
})
/*
function settingIndex(index) {
    console.log("settingIndex"   index);
    setIndex(index)
    removeNote(event); 
}
*/

function noteDown(event){
    event.preventDefault();
    
    var newNote ={
        notes : notes
    }

    console.log("note down "   newNote);
    axios.post('/api/user/notes/add/' , newNote).then(res=>{
        console.log(res); 
    }).catch(err=>{
        console.log(err); 
    })
    window.location.href='/app/notes/'
}

function removeNote(event, index){
    event.preventDefault(); 
    console.log("this is removeNote"   index);
    
    axios.post('/api/user/notes/remove/', index).then(res=>{
        console.log("removing index"   index); 
    }).catch((err)=>{
        console.log(err); 
    });
    window.location.href='/app/notes/'
    }

    return(
    <div>
    <div> 
        <h1 style={{color:'white'}} > Notes </h1>
    </div> 
        <form onSubmit={noteDown}>
            <input type="text" placeholder="Note" className='form-control' value={notes}  onChange={(e)=>{setNote(e.target.value)}}/>
            <input type="submit" value="AddNote" className="btn btn-primary"/> 
            
        </form> 
        <div>{DataList}</div>
    </div> 
); 
}export default Notes; 
  

Пожалуйста, попробуйте это.

 <button className="btn btn-secondary" onClick={e => removeNote(e, index)}>Delete</button>