Check if state array contains object id, JavaScript

Question

I'm developing an app which has to fetch new orders from the Firestore database, I used componentDidMount to refresh the screen every 10 seconds and launch the fetchNewOrders function, if new orders are available, the function should push that object into the state array newOrder, and display the orders in the FlatList below. When I start the code it returns the error TypeError: undefined is not an object (evaluating 'item.id'), I also wrote the example of an array I'm fetching from the database.

Screen

   export default class Received extends Component {
      constructor(props) {
        super(props);
        this.state = {
          loaded: false,
          newOrder: [],
        };
      }

    async componentDidMount() {
        this.updateTimer = setInterval(() => {
          this.fetchNewOrders();
          }, 10000);
      }
    
        fetchNewOrders = async () => {
            const querySnapshot = await getDocs(collection(db, path));
            if(querySnapshot.length !== 0) {
              querySnapshot.forEach((doc) => {
                let array = this.state.newOrder;
                const data = doc.data().order;
                data.map(({obj, id}) => {
                  const filter = array.find(c => c.id === id);
                  if (filter == undefined) {
                    array.push(obj)
                    this.setState({ newOrder: array })
                  }
                })
              })
            }
          }

render() {

        return (
          <View>
            <FlatList
              data={this.state.newOrder}
              keyExtractor={item => item.id}
              renderItem={({ item }) => {
                return (
                  <TouchableOpacity>
                    <Text>{item.serviceRequested}</Text>
                    <View>
                      <Tex>${item.total}</Text>
                    </View>
                  </TouchableOpacity>
                )
              }}
            />
          </View>
        )
      }
}

data (new order)

Array [
  Object {
    "date": "Mon Feb 28 2022 11:24:14 GMT-0500 (EST)",
    "id": 0.9436716663143794,
    "instructions": "",
    "order": Array [
      /////////////
    ],
    "paymentType": "Cash",
    "serviceRequested": "Delivery",
    "total": 10.4,
  },
]

Are you aware that firestore allows WebSocket connections, thus eliminating the need to poll the database? — code
– code, Commented Feb 28, 2022 at 18:01

windowsill · Accepted Answer · 2022-02-28 19:22:24Z

1

setState is an async function that schedules a render with new state. It should only be called once per render, not in a loop.

    const append = [];

    querySnapshot.forEach((doc) => {

      const data = doc.data().order;

      // Is there bad data without ids?
      data.filter(c => c.id && !this.state.newOrder.some(no => no.id === c.id))
          .forEach((d) => append.push(d));
    });

    // Create the new state, then set it once.
    this.setState({ newOrder: [...this.state.newOrder, ...append]});

answered Feb 28, 2022 at 19:22

windowsill

3,6491 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zaedonn · Accepted Answer · 2022-02-28 18:05:39Z

I would suggest filtering your data (this.state.newOrder) first. This would make it so that you only display items that have ids.

Suggested Change:

        <FlatList
          data={this.state.newOrder.filter((order)=>order.id)}
          keyExtractor={item => item.id}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity>
                <Text>{item.serviceRequested}</Text>
                <View>
                  <Tex>${item.total}</Text>
                </View>
              </TouchableOpacity>
            )
          }}
        />

Above is code to fix this issue as described, but I would suggest that you make sure the Firestore only sends data that has id's if possible. Obviously, this may be out of your hands, but I would make sure that the Firestore is giving you reliable data, as it could cause more problems down the road.

Collectives™ on Stack Overflow

Check if state array contains object id, JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related