React Native：组件状态下的重复项

Question

我在StackNavigator中有两个屏幕，一个屏幕带有显示从Firestore检索到的数据的FlatList，另一个屏幕用于向数据库添加新数据。通过navigation.goBack（）从堆栈中的第二个屏幕返回后，新项目应添加到列表中。取而代之的是，将具有新项目的整个状态附加到旧状态。数据库数据不包含重复项，并且刷新后，列表中包含正确的元素。

我不知道是误解了组件的生命周期还是查询本身，所以我将不胜感激。

export default class Main extends React.Component {

state = { chatData:[] }


componentDidMount = () => {
  // Make call to Cloud Firestore
  // for the current user, retrieve the chat document associated with each element in the chats id array
  let user = firebase.auth().currentUser;
  firestore().collection("users").doc(user.uid).onSnapshot((doc) => {
    doc.data().chats.map((element) => {
      firestore().collection("chats").doc(element).onSnapshot((doc) => {
        this.setState({chatData: [...this.state.chatData, 
          {id: element, subject: doc.data().subject, course: doc.data().course}]})
      })
    });
  })
}

添加课程并返回列表屏幕后的状态（重复的元素）

Answer 1

设置状态时，请尝试使用prevState回调函数。像这样：

export default class Main extends React.Component {

state = { chatData:[] }


componentDidMount = () => {
  // Make call to Cloud Firestore
  // for the current user, retrieve the chat document associated with each element in the chats id array
  let user = firebase.auth().currentUser;
  firestore().collection("users").doc(user.uid).onSnapshot((doc) => {
    doc.data().chats.map((element) => {
      firestore().collection("chats").doc(element).onSnapshot((doc) => {
        // We use the parameter of the first argument of setState - prevState
        this.setState(prevState => ({chatData: [...prevState.chatData, 
          {id: element, subject: doc.data().subject, course: doc.data().course}]}))
      })
    });
  })
}

因为您想像以前一样，使用从firestore中获取的新数据来扩展以前存在的状态。如果使用this.state进行操作，则将再次添加它，因为它涉及的是已处于状态且因此重复/重复的数据。让我知道是否有帮助。

Answer 2

尝试创建具有唯一值的新数组并将其分配给chatData

componentDidMount = () => {
    let user = firebase.auth().currentUser;
    firestore().collection("users").doc(user.uid).onSnapshot((doc) => {
        doc.data().chats.map((element) => {
            firestore().collection("chats").doc(element).onSnapshot((doc) => {
                /**
                 * create a new array with unique values
                 */
                let newArray = [...this.state.chatData, { id: element, subject: doc.data().subject, course: doc.data().course }]
                let uniqueArray = [...new Set(newArray)]
                this.setState({
                    chatData: uniqueArray
                })
            })
        });
    })
}

希望这对您有所帮助。随时提出疑问。