Добавить объект в массив и обновить sectionList

Question

Я добавил новый объект контакта и пытаюсь показать его в SectionList.Но когда я пытаюсь поместить объект в массив, я получаю сообщение об ошибке: TypeError: undefined не является объектом (оценка 'n.data.length')

Я использовал инструкции в этой ссылке, чтобы решитьпроблема. как добавить новый объект в качестве значения в массив в состоянии реакции

constructor(props) {
    super(props);   

    this.state = {
      contacts : [],
      newContactDialogVisible: false,
      contactName : '',
      contactPhone : ''
    }
  }

refreshContactsList = () => {
    const newContact = {'name': this.state.contactName, 'phone': this.state.contactPhone};
    Alert.alert(newContact.name + " " + newContact.phone); // Alert working and shows the right data
    this.setState({ contacts: [...this.state.contacts, newContact] });
  }

<SectionList
            sections={this.state.contacts}
            renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
          />

Answer 1

Вы не правильно использовали решение по ссылке. Отсутствуют упаковочные скобки.

this.setState(state => ({
  contacts: [...state.contacts, newContact]
}));

Я думаю, что вы можете пойти короче с

this.setState({ contacts: [...this.state.contacts, newContact] });

И я хотел бы добавить, что

this.refreshContactsList = this.refreshContactsList.bind(this);

не требуется, поскольку refreshContactList является функцией стрелки, и вы не потеряете указатель this внутри. Если вы объявляете его как refreshContactList() {...}, вам необходимо связать this.

Answer 2

Наконец-то я нашел правильный синтаксис, как это сделать:

refreshContactsList = () => {
    const newContact = {data: [{name:this.state.contactName, phone:this.state.contactPhone}]};
    this.setState({ contacts: [...this.state.contacts, newContact]})
  }

Answer 3

Я думаю, что проблема в неправильном синтаксисе функции стрелки.Попробуйте это

this.setState(state => {
    return {contacts: [...state.contacts, newContact]};
});