Question

检查状态数组是否包含对象 ID，JavaScript

2022-02-28

1169

javascript arrays reactjs react-native filter

我正在开发一个必须从 Firestore 数据库获取新订单的应用程序，我使用 componentDidMount 每 10 秒刷新一次屏幕并启动 fetchNewOrders 函数，如果有新订单，该函数应将该对象推送到状态数组 newOrder ，并在下面的 FlatList 中显示订单。当我启动代码时，它返回错误 TypeError: undefined 不是对象（评估'item.id'） ，我还编写了一个从数据库获取的数组的示例。

屏幕

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>
        )
      }
}

数据（新订单）

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,
  },
]

Answer 1

setState 是一个异步函数，用于安排渲染新状态。每次渲染时只应调用一次，而不应循环调用。

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]});

Answer 2

我建议先过滤您的数据 (this.state.newOrder)。这样您就只能显示具有 ID 的项目。

建议更改：

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

以上是修复此问题的代码，如所述，但我建议您确保 Firestore 仅发送具有 ID 的数据（如果可能）。显然，这可能超出您的控制范围，但我会确保 Firestore 为您提供可靠的数据，因为它可能会在以后引起更多问题。