Добавить объекты в массив, используя React. js - PullRequest
Новая
       3

Добавить объекты в массив, используя React. js

1 голос
/ 28 января 2020

Задачами этого приложения реагирования являются: во-первых, записать группу пользовательских данных, имя и фамилию и адрес; во-вторых, создать ОДИН объект карты для каждой группы входов; в-третьих, сохраните каждый объект карты в новый массив с именем List. После некоторых онлайн-консультаций код был изменен следующим образом: 

const InputField=()=>{
        const [lastName,setLastName]=useState("");
        const [firstName,setFirstName]=useState("");
        const [address,setAddress]=useState("");
        const [card,setCard]=useState({});
        const [list,setList]=useState([]);

        const lastNameUpdate=(e)=>{
          setLastName(e.target.value)
        }

        const firstNameUpdate=(e)=>{
          setFirstName(e.target.value)
        }

        const addressUpdate=(e)=>{
          setAddress(e.target.value)
        }

        const cardUpdate = (e, card) => {
          e.preventDefault();
          setCard({ lastName, firstName, address });
          setList([...list, { ...card }]);
        };

        useEffect(()=>{
          console.log(card)
          console.log(list)
        },[card,list])

  return (
    <div className="user-input-field">
      <form type='submit'onSubmit={cardUpdate}>
        <label>Last Name:</label>
        <input type='text'value={lastName}onChange={lastNameUpdate}></input>
        <label>First Name:</label>
        <input type='text'value={firstName}onChange={firstNameUpdate}></input>
        <label>Address:</label>
        <textarea type='text'value={address}onChange={addressUpdate}></textarea>
        <input type='submit'></input>
      </form>
    </div>
  )
};

Новая проблема заключается в том, что при работе пользовательские вводы сохраняются в объекте Card, но при хранении в Массив списка, объекты пустые.

Псевдокод: 

a card_x object = {first name_x, last name_x, address_x}
a list array= [card_1, card_2, card_3...]

теперь массив списков добавляется при нажатии кнопки отправки, но card_1, card_2, card_3 и т. Д. c. в массиве просто пустой объект.

1 Ответ

1 голос
/ 28 января 2020

Я думаю, вы должны изменить свою карточку на: 

    const cardUpdate = (e) => {
      e.preventDefault();
      const newCard = { lastName, firstName, address };
      setCard(newCard);
      setList([...list, { ...newCard }]);
    };

Надеюсь, это поможет.

...