将对象添加到数组并刷新 sectionList

Posted 2023-02-16

【中文标题】将对象添加到数组并刷新 sectionList

【英文标题】：Add object to an array and refresh the sectionList

【发布时间】：2019-10-29 03:20:57

【问题描述】：

我添加了一个新的联系人对象并尝试在 SectionList 中显示它。但是当我尝试将一个对象放入数组时，我收到一个错误：TypeError: undefined is not an object (evalating 'n.data.length')

我使用此链接中的说明来解决问题。 how to add a new object as a value to an array in the react state

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>
          />

【参考方案1】：

我认为问题在于错误的箭头函数语法。试试这个

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

【讨论】：

当 => 符号后面有一个左大括号时，它会将其视为函数体，而不是将其作为对象返回。

感谢您的回复。但现在我收到一个错误：TypeError: undefined is not an object (evalating 'n.data.length')。我想我不需要返回一些东西，因为 setState 正在发挥作用

【参考方案2】：

您没有正确使用链接的解决方案。缺少环绕括号。

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

我认为你可以缩短

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

我想补充一下

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

没有必要，因为refreshContactList 是一个箭头函数，您不会丢失内部的this 指针。如果声明为refreshContactList() ...，则需要绑定this。

【讨论】：

你是对的，我已经更正了。但现在我收到一个错误：TypeError: undefined is not an object (evalating 'n.data.length')

你能在setState之前登录this.state.contacts吗？

请去掉newContact属性名的单引号(') :)

我认为我的问题在于联系人声明。我向 this.state.contacts 发出警报（console.log 对我不起作用），它重新启动了我的应用程序（我正在使用 expo）。

将 newContact 放入 this.setState( contacts: [...this.state.contacts, newContact] ); 有问题，因为联系人是对象数组

【参考方案3】：

最后我找到了正确的语法：

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

【讨论】：

nice :) 所以这是你需要添加data 属性的有点博览会的东西？