Удалить из массива React

avatar
Floziko
8 августа 2021 в 18:05
75
2
0

я пытаюсь удалить объект из своего массива, когда нажимаю на одно из первых имен в таблице, но получаю сообщение об ошибке, Я знаю, что проблема с функцией удаления, но я не знаю, в чем. или, может быть, проблема связана с моим onClick, но я так не думаю.

последний вопрос, я хочу добавить кнопку, когда я нажимаю на него, массив возвращается к исходному массиву, без всех имен, которые я добавил с помощью кнопки «Добавить».

Вы можете помочь мне с этим?

import logo from './logo.svg';
import './App.css';
import React from "react"

class App extends React.Component {

  state = {
    columns : ["First Name","Last Name","Age"],
    inputName : "",
    inputLastName : "",
    inputAge : "",
    students: [
      {
        name : "lala",
        lastName : "abc",
        age: 21
      },
      {
        name : "lolo",
        lastName : "efg",
        age: 21
      },
      {
        name : "lrlr",
        lastName : "aaaa",
        age: 21
      }
    ],

  }

  changeName =(event) =>{
    this.setState({
      inputName:event.target.value
    })
  }

  changeLast =(event) =>{
    this.setState({
      inputLastName:event.target.value
    })
  }

  changeAge =(event) =>{
    this.setState({
      inputAge:event.target.value
    })
  }

  addColum = (event) => {
    const newArray =this.state.students;
    const newStudents={
      name:this.state.inputName,
          lastName:this.state.inputLastName,
          age:this.state.inputAge
    }
    newArray.push(newStudents);
    this.setState({
      students:newArray
    })
  }

  delete = (event) =>{
    this.setState({students: this.state.students.filter(item => {
       return(item !==event.target.value )
      })});
  }



  render() {

    return(
        <div class="App">
          <div style={{color:"blue"}}><h1><u>Students Table</u></h1></div>
          <table class="App" style={{border:"1px solid black"}}>
            <tr >
              {
                this.state.columns.map(column => {
                  return(
                      <th>{column}</th>
                  )
                })
              }
            </tr>
            {
              this.state.students.map(student =>{
                return(
                    <tr>
                      <div onClick={this.delete}><td>{student.name}</td> </div>
                      <td>{student.lastName}</td>
                      <td>{student.age}</td>
                    </tr>
                )
              })
            }
          </table>
          <br/>
          <div>First Name:<input value={this.state.inputName} onChange={this.changeName}></input> </div>
          <div>Last Name:<input value={this.state.inputLastName} onChange={this.changeLast}></input> </div>
          <div>Age:<input value={this.state.inputAge} onChange={this.changeAge}></input> </div>
          <br/>
          <div><button style={{backgroundColor:"salmon"}} onClick={this.addColum}>Add</button></div>
        </div>

  )
    }
}



export default App;
Источник
AL.Sharie
8 августа 2021 в 18:11
0

coderhelper.com/questions/36326612/…

Floziko
8 августа 2021 в 18:13
0

я уже пробовал это на своем коде, я не могу заставить его работать..

Ответы (2)

avatar
kritiz
8 августа 2021 в 18:19
2

event.target.value в вашей функции удаления всегда будет undefined.
Если вы хотите передать имя учащегося в функцию удаления, вы также можете сделать это следующим образом

  delete = (studentName) => {
    this.setState({students: this.state.students.filter(item => {
       return(item.name !== studentName )
      })});
  }

и для вызова функции

          {
              this.state.students.map(student =>{
                return(
                    <tr>
                      <div onClick={()=>this.delete(student.name)}><td>{student.name}</td></div>
                      <td>{student.lastName}</td>
                      <td>{student.age}</td>
                    </tr>
                )
              })
           }
Floziko
8 августа 2021 в 18:25
0

я не могу сделать это с событием?

kritiz
8 августа 2021 в 18:32
0

для целей вашего приложения вы можете использовать e.target.textContent или, может быть, e.target.innerHTML также работает, но я бы сказал, что это не очень хороший способ для стандартного реагирующего приложения.

avatar
rappid juniper
8 августа 2021 в 18:17
1

в вашей функции удаления вы сравниваете объект со значением вместо этого используйте

delete = (event) =>{
    this.setState({students: this.state.students.filter(item => {
       return(**item.name** !==event.target.value )
      })});
  }
rappid juniper
8 августа 2021 в 18:29
0

попробуйте console.log(item.name, event.target.value) и проверьте, что любой из них имеет значение null