Оператор Spread в реакции вызывает сохранение каждого символа в своем собственном массиве при обновлении в firebase.

Question

У меня проблема с сохранением массива состояний, но он берет каждый символ и делает его собственным индексом массива.

Вот мой код:

   const { currentOrganization, phone, email,
      address, address2, city, zip, headOfHousehold, household,
      firstHousehold, lastHousehold, householdDropdown } = this.state;

    this.props.firebase.db.ref('organization/' + currentOrganization + '/members').push()
    .then(snap => {
       return snap.key
    })
    .then(keyUid => {
      this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + keyUid ).set(
        {
            first: firstHousehold,
            last: lastHousehold,
            phone: phone,
            email: email,
            address: address,
            address2: address2,
            city: city,
            zip: zip,
            headOfHousehold: headOfHousehold,
            household: [...household, keyUid],
          })
          return keyUid;
    })
    .then(newHouseholdUid => {
      this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + this.state.memberKeyID ).update({
        household: [...household, newHouseholdUid]
      })
      this.setState({ houseHoldGroup: [...this.state.houseHoldGroup, {
        firstHousehold: firstHousehold, lastHousehold: lastHousehold, householdDropdown: householdDropdown }] })
    })

  }

В приведенном выше коде я говорю домохозяйство с двумя разными членами в базе данных Firebase. Значение отображается в базе данных, но выглядит это так:

0: 
"-"
1: 
"L"
2: 
"q"
3: 
"A"
4: 
"E"
5: 
"X"
6: 
"z"
7: 
"v"
8: 
"G"
9: 
"H"
10: 
"T"
11: 
"f"
12: 
"s"
13: 
"4"
14: 
"j"
15: 
"J"
16: 
"2"
17: 
"T"
18: 
"8"
19: 
"r"
20: 
"-LqAEeTs2lfQYujNbQub"

По какой-то причине оператор распространения разбивает мое значение на каждый символ. Есть идеи, что я делаю не так?

Answer 1

Кажется, что вы распространяете строку вместо массива (домашнее хозяйство). Это приводит к разделению строки на отдельные символы.

Удостоверьтесь, что домохозяйство - это массив.

Чтобы убедиться в этом, вам может потребоваться библиотека npm «prop-types», которая гарантирует, что при передаче в компонент реквизиты имеют определенный формат.

Используется как:

[ComponentName].propTypes = {
household: PropTypes.arrayOf(PropTypes.string).isRequired
//... other props
}

Если в конце будет передан не массив строк, а строка, вы получите консольную ошибку, облегчающую пониманиечто идет не так