Добавить серию объектов в React - PullRequest
Новая
       0

Добавить серию объектов в React

2 голосов
/ 27 января 2020

Итак, я работал над этой функцией для приложения js, которое я разрабатываю. Во-первых, запишите группу пользовательских вводов, имя и фамилию и адрес. Во-вторых, создайте ОДИН объект карты для каждой группы входов. В-третьих, сохраните каждый объект карты в новый объект с именем 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([
            {last_name:lastName},
            {first_name:firstName},
            {st_address:address}
        ])
        setList(prevState=>({
            s:{...prevState.list,...card}
        }))
    }

    useEffect(()=>{
        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>
  )
};

Очевидно, я пробовал concat, но я узнал, что concat не работает для добавления объектов. Псевдокод: 

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

Что мне здесь делать?

Ответы [ 2 ]

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

Изменения:

  1. передать объект вместо списка
  2. значение по умолчанию списка должно быть [] вместо {}

Это должно работать. 

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

  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, { lastName, firstName, address }]);
  };

  useEffect(() => {
    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>
  );
};
0 голосов
/ 27 января 2020

Попробуйте использовать переменную, содержащую новый обновленный список карт, и setList для этого нового списка карт: 

const cardUpdate = (e, card) => {
  e.preventDefault();
  setCard([{ last_name: lastName }, { first_name: firstName }, { st_address: address }]);

  // new cards list
  const cardList = [...list, card];

  // update the state
  setList(cardList);
};
...