reactjs - 我是新反应，我想创建人员列表，您可以在其中为人员添加姓名和号码，但我被卡住了

Question

我想要的是，每当用户尝试添加新人（姓名，号码）时，程序将首先检查该名称是否存在，如果存在，它会提醒用户该名称已经存在以及是否要替换. 现在，如果用户不存在，程序正在运行，但如果用户存在，程序就会失败。经过这里和谷歌的所有搜索后，我真的不知道如何完成。谢谢你的帮助。

这是我的代码：

应用程序.js

import React, { useState, useEffect } from 'react';
import Person from './components/Person';
import personDetails from './services/person';

const App = (props) => {
    const [search, setSearch] = useState('')

    const { name, number } = props;
    
    const [persons, setPersons] = useState([]);
    const [input, setInput] = useState({
      name: "",
      number: ""
    });
    
    useEffect(() => {
      personDetails
        .allPersons()
        .then(response => {
          setPersons(response.data)
        })
    }, [])

    const [ newName ] = useState('')
  
    const addPerson = input => {      

      setPersons([...persons, { name: input.name, number: input.number }]);
      setInput({ name: "", number: "" });

      personDetails
        .createPerson(input)
        .then(response => {
          setPersons(persons.concat(response.data))
        })
    };

    const handleSubmit = e => {
      e.preventDefault();
      persons.forEach(function(s, p) {
        if(s.name !== input.name) {
          addPerson(input);
        } else {
          window.alert(`${s.name} is already in the phonebook, replace the old number with a new one?`)
          personDetails
          .editPerson(s.id)
          .then(response => {
            persons.filter(person => {
              if(person.name !== "" && person.number !== "") {
                return person
              }
            })
          })
        }
      })
    };

    const handleChange = e => {
      setInput({
        ...input,
        [e.target.name]: e.target.value
      });
    };
    const filteredPeople = persons.filter(person => {
      return person.name.toLowerCase().includes(search.toLowerCase())
    })
    return (
      <div>
        <h2>Phonebook</h2>
        <div style={{ display: 'flex' }}>
          <div>filter shown with</div>
          <input type="text" placeholder="Search..." onChange={e => setSearch(e.target.value)} />
          
        </div>
        <h2>add a new</h2>
        <form onSubmit={handleSubmit}>
          <div>
            name: 
            <input
              name="name"
              type="text"
              value={name}
              onChange={handleChange}
            /><br />
            number: 
            <input
              name="number"
              type="text"
              value={number}
              onChange={handleChange}
            />
          </div>
          <div>
            <button type="submit">add</button>
          </div>
        </form>
        <h2>Numbers</h2>
        <li>
          {filteredPeople.map(person => 
            <Person handleChange={handleChange} 
                    handleSubmit={handleSubmit} 
                    addPerson={addPerson} 
                    input={props} key={person.number} 
                    person={person}             
            />
            )}
        </li><br />
      </div>
    )
  }

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
  
ReactDOM.render(<App />, document.getElementById("root"))

人.js

import axios from 'axios';
const baseUrl = 'http://localhost:3001/persons'

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

const createPerson = input => {
    return axios.post(baseUrl, input)
}

const deletePerson = (id, persons) => {
    return axios.delete(`${baseUrl}/${0}`, persons)
}

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

export default { allPersons, createPerson, deletePerson, editPerson }

db.json

{
  "persons": [
    {
      "name": "Mary Poppendieck",
      "number": "39-23-6423122",
      "id": 4
    },
    {
      "name": "Dan Abramov",
      "number": "1234",
      "id": 13
    }
  ]
}

标签： reactjs

Answer 1

我已经整理了一个我认为您正在尝试做的工作示例。我使用您提供的数据作为基础，用虚拟 Promises 替换了您的调用。为了使这项工作正常进行，必须进行许多更改。看一看，如果您有任何问题，请告诉我。axios

import React, { useState, useEffect } from "react";
import Person from "./components/Person";
import personDetails from "./services/person";

const App = ({ name, number }) => {
  const [search, setSearch] = useState("");

  const [persons, setPersons] = useState([]);
  const [input, setInput] = useState({ name, number });
  console.log("input", input);

  useEffect(() => {
    personDetails.allPersons().then((response) => setPersons(response.data));
  }, []);

  const addPerson = (input) => {
    personDetails.createPerson(input).then((response) => {
      setInput((prev) => ({ name: "", number: "" }));
      setPersons((prev) => [...prev, response.data]);
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const existingPerson = persons.find((_) => _.name === input.name);
    if (existingPerson) {
      if (
        window.confirm(
          `${existingPerson.name} is already in the phonebook, replace the old number with a new one?`
        )
      ) {
        personDetails.editPerson(existingPerson.id, input).then((response) => {
          setPersons((prev) => [
            ...prev.filter((_) => _.id !== response.id),
            response
          ]);
        });
      }
    } else {
      addPerson(input);
    }
  };

  const handleChange = (e) => {
    setInput((prev) => ({
      ...input,
      [e.target.name]: e.target.value
    }));
  };
  const filteredPeople = persons.filter((person) => {
    return person.name.toLowerCase().includes(search.toLowerCase());
  });
  return (
    <div>
      <h2>Phonebook</h2>
      <div style={{ display: "flex" }}>
        <div>filter shown with</div>
        <input
          type="text"
          placeholder="Search..."
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>
      <h2>add a new</h2>
      <form onSubmit={handleSubmit}>
        <div>
          name:
          <input
            name="name"
            type="text"
            value={input.name}
            onChange={handleChange}
          />
          <br />
          number:
          <input
            name="number"
            type="text"
            value={input.number}
            onChange={handleChange}
          />
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <h2>Numbers</h2>
      <li>
        {filteredPeople.map((person) => (
          <Person
            handleChange={handleChange}
            handleSubmit={handleSubmit}
            addPerson={addPerson}
            key={person.number}
            person={person}
          />
        ))}
      </li>
      <br />
    </div>
  );
};

export default App;