0

每次我删除一个人时，我都会收到错误 p.name.toLowerCase is not a function。但不仅如此。此外，当 axios 尝试删除它时，它还会在输入字段中创建一个带有数字的空名称。在我删除它之后，我在 db.json 文件中也得到了空数组。

https://prnt.sc/ptrfh6 - 所以在我创建一个新用户并将其删除后，它会自动创建具有旧号码的空用户。在我删除该数字后，它会在 db.json 中创建具有该 ID 的空文件。在我尝试通过删除按钮删除该 empry 文件后，我得到了这个 - https://prnt.sc/ptrghn

未处理的拒绝 (TypeError)：p.name.toLocaleLowerCase 不是函数

应用程序.js

import React, {useState, useEffect, useCallback, useRef} from 'react'
import './App.css';
import Person from './components/Person'
import Filter from './components/Filter'

import personService from './services/persons'

const  App = () => {

  const [persons, setPersons] = useState([])
  const [newName, setNewName] = useState([])
  const [newNumber, setNewNumber] = useState([])
  const [filter, setNewFilter] = useState([])


  // delete person by his ID using axios


    const deletePersonId = (id) => {
      const person = persons.find(p => p.id === id)
      personService
      .delPerson(id)
      .then(response => {
        setPersons(persons.filter(p => p.id !== id))
        console.log(person)
      })
      .catch(error => {
         if (error.response) {
           console.log(error.response.data)
         } 
      }) 
    }



  // effect hook for getting json data
  useEffect(() => {
    personService
    .getAll()
    .then(response => {
      setPersons(response.data)
    })

  }, [])

  // adding new names using json data with axios
  const addName = (e) => {
    e.preventDefault()
    const nameObject = {
      name: newName,
      number: newNumber,
      id: persons.length + 1
    }
    personService
    .create(nameObject)
    .then(response => {
      setPersons(persons.concat(response.data))
      setNewName('')
    })
  }


  // maping persons and getting a list of persons
  const rows = () => persons.map(person => 
    <Person 
          key={person.id} 
          person={person}
          number={person.number} 
          onSubmit={addName}
          deletePerson={() => window.confirm(`are you sure u want to delete '${person.name}'`, deletePersonId(person.id))}
          />
  )

  // add button event
  const handleAdd = (event) => {
    setNewName(event.target.value)
  }

  // add number event
  const addNumber = (event) => {
    setNewNumber(event.target.value)
  }

  // filter persons with input element
  let filteredPersons = persons;
  if (filter) {
    filteredPersons = persons.filter(
      p => p.name.toLocaleLowerCase().indexOf(filter.concat('')) !== -1
    );
  }

  return ( 
    <div>
      <h2>Phonebook</h2>
      <Filter onChange={setNewFilter} value={filter}  />
      <form onSubmit={addName}>
        <div>
          name: <input onChange={handleAdd} value={newName}/>
        </div>
        <div>
          number: <input onChange={addNumber} value={newNumber}/>
        </div>
        <div>{rows()}</div>
        <div>
          <button type="submit">Add</button>
        </div>
      </form>
      <h2>Numbers</h2>
      { <div>{filteredPersons.map(person => <div key={person.id}>
                                              {person.id}. 
                                              {person.name} / 
                                              {person.number}
                                          </div>)}
      </div> }
      <p></p>
    </div>
  );
}


export default App;

db.json

{
  "persons": [
    {
      "name": "Veljko Kukic",
      "number": "31-42-6614672",
      "id": 1
    },
    {
      "name": "Teodora Jovanovic",
      "number": "34-65-14441",
      "id": 2
    },
    {
      "name": "Milica Aleksic",
      "number": "94-65-419949",
      "id": 3
    },
    {
      "name": [],
      "number": [],
      "id": 5
    }
  ]
}

服务/persons.js

import axios from 'axios'

const baseUrl = 'http://localhost:3001/persons'

const getAll = () => {
    return axios.get(baseUrl)
}

const create = newPerson => {
    return axios.post(baseUrl, newPerson)
}

const update = (id, newPerson) => {
    return axios.put(`${baseUrl}/${id}`, newPerson)
}

const delPerson = id => {
     return axios.delete(`${baseUrl}/${id}`)
}

export default {getAll, create, update, delPerson}

人员组件

import React from 'react';


const  Person = ({person, id, number, deletePerson }) => {
    return (
        <div key={person.id}>
            {person.id} {person.name} {person.number}
            <button onClick={deletePerson}>Delete</button>
        </div>
    )
}

export default Person

我没有简单地包含过滤器组件。但是如果你想检查所有代码并克隆它来检查它已经在 git 上的问题。

https://github.com/Ljove87/电话簿

谢谢转发

编辑： json 服务器在端口 3001 上运行，您可以通过 commat npm run server 运行它

编辑：Filter.js

import React from "react";

const Filter = ({ value, onChange }) => {
  const handleFilterChange = event => {
    onChange(event.target.value);
  };
  return (
    <div>
      filter shown with: <input value={value} onChange={handleFilterChange} />
    </div>
  );
};

export default Filter;
4

0 回答 0