制作电话簿应用程序并遇到.map和.filter组件的麻烦

我已经坚持了很长时间并且准备放弃它，但是我将把它作为最后一次尝试解决此问题的方法。我需要这个应用程序才能工作，以便当我在过滤器框中键入内容时，它将使用过滤器的输入来过滤显示的电话簿结果。如果我尝试将.map或.filter放入应用程序中，则会出现错误；如果我尝试将组件重构为.map或.filter，则会出现错误。有人可以清楚地解释一下我在这里真正地不明白吗？

import React, { useState } from 'react'

const Persons = (props) => {
  return (
      <p>{props.name} {props.number}</p>   
  )
}

const Filter = (props) => {
  return (
      <p>{props.name} {props.number}</p>  

  )
}

const App = () => {
  const [ persons, setPersons] = useState([
    { name: 'Arto Hellas', number: '040-123456' },
    { name: 'Ada Lovelace', number: '39-44-5323523' },
    { name: 'Dan Abramov', number: '12-43-234345' },
    { name: 'Mary Poppendieck', number: '39-23-6423122' }
  ]) 
  const [ newName, setNewName ] = useState('')
  const [ newNumber, setNewNumber ] = useState('')
  const [ newFilter, setNewFilter ] = useState('')
  /*
  const [ allClicks, setAllClicks ] = useState(0)
  */

 const filteredNames = () => persons.filter(person => person.name === newFilter.name)



  const handlePersonChange = (event) => {
    console.log(event.target.value)
    setNewName(event.target.value)
    return
  }

  const handleFilter = (event) => {
    event.preventDefault()
    console.log(newFilter)
    setNewFilter(event.target.value)
  }

  const handleNumberChange = (event) => {
    console.log(event.target.value)
    setNewNumber(event.target.value)
    return
  }

  const addPerson = (event) => {
    console.log('testi', event.target)
    event.preventDefault()
    const personObject = {
      name: newName,
      number: newNumber,
      date: new Date().toISOString(),
      id: persons.length + 1,
      filter: newFilter
    }
/*
 const handleNewClicks = (name) => {
      let selectedPerson = persons.filter(person => person.name === name)
    }
*/
    if (
      personsAlreadyExists(newName)) {
        window.alert(newName + ' is already added to phonebook'
        );
        const personCopy = {
          name: persons,
          newName: ''
        }
        setPersons(persons.splice(personCopy))
        return personCopy
      }
    setPersons(persons.concat(personObject))
    setNewName('')
    return personObject
  }
    let personsAlreadyExists = (name) => {
    return persons.find(person => person.name === name)
}

  return (
    <div>
      <h2>Phonebook</h2>

      Filter with: <input onChange={handleFilter} value={newFilter}/>  

      <form onSubmit={addPerson}>
        <div>
          name: <input  onChange={handlePersonChange} value={newName}/>
        </div>
        <div>
          number: <input onChange={handleNumberChange} value={newNumber}/>
        </div>
        <div>
          <button  type="submit">Add Contact</button>
        </div>
      </form>
        <h2>Numbers</h2> 

        <div>
          {persons.map(person => 
          <Persons key={person.name} name={person.name} number={person.number} /> )}

          <Filter key={persons.name} newFilter={filteredNames} filteredNames={filteredNames} /> 
        </div>
    </div>
  )
}

export default App

先谢谢您的帮助！