Javascript Can'；你不能立即更新状态吗？

我有两个函数，第一个我得到所有订单，第二个我得到所有被拒绝的订单

所以在第一个函数中，我根据第二个函数状态更新状态 而且效果很好

但是当我从Firebase控制台删除一个项目时，我无法立即看到更新，尽管我使用了

on（“value”，（）=>{}）

那我怎么处理呢

警告

无法对未安装的组件执行React状态更新。这是 无操作，但表示应用程序内存泄漏

结构阵列

let ordersArray = [
   {"snapshotKey":"-awdawadsdwwd","username":"Joe"},
   {"snapshotKey":"-badsdasdad","username":"Annna"},
   {"snapshotKey":"-dasQwaddas","username":"lee"}
]

let rejectedOrders = ["-awdawadsdwwd","-dasQwaddas"] 

陈述

this.state = {
      orders: [],
      rejectedOrders: [],
    };


componentDidMount() {
    try {
      this.getRejectedOrders();
      this.fetchOrders();
    } catch (err) {
      console.log('error', err);
    }
}

第一功能

//Get all orders from DB

 fetchOrders = async () => {
    const {serviceName} = this.state;
    let uid = auth().currentUser.uid;
    const serviceStorage = await AsyncStorage.getItem('service');
    this.setState({serviceStorage});
    database()
      .ref(`Providers/CategoriesOrders/${serviceName || serviceStorage}`)
      .on('value', snapshot => {
        let orderArr = [];
        snapshot.forEach(childSnapshot => {
          orderArr.push({
            snapshotKey: childSnapshot.key,
            username: childSnapshot.val().username,
          });
        });
        this.setState(prevState => ({
          orders: orderArr.filter(
            order =>
              !prevState.rejectedOrders.some(key => order.snapshotKey === key),
          ),
          loading: false,
        }));
      });
  };

第二功能

// get an array of rejected orders

  getRejectedOrders = () => {
    let uid = auth().currentUser.uid;
    const ref = database().ref(`Providers/users/${uid}`);
    ref.on('value', snapshot => {
      let rejectedOrders = snapshot.val().rejectedOrders;
      this.setState({rejectedOrders});
    });
  };

JSX

render（）{
返回(
);
}

组成部分

const OrdersList = props => {
  return (
    <View style={styles.container}>
      <FlatList
        showsVerticalScrollIndicator={false}
        data={props.data}
        extraData={props.extraData}
        ListEmptyComponent={<EmptyList />}
        keyExtractor={(item, index) => index.toString()}
        legacyImplementation={true}
        contentContainerStyle={{
          flexGrow: 1.2,
        }}
        renderItem={({item}) => {
          return (
            <TouchableOpacity
              onPress={() =>
                props.navigation.navigate(props.screenName, {
                  username: item.username,
                  snapshotKey: item.snapshotKey,
                })
              }
             >

                <View>
                  <Icon name="person" color="#AEACAC" size={20} />
                  <Text> {item.username}</Text>
                </View>

            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

export default withNavigation(OrdersList);

const OrdersList=props=>{
返回(
index.toString（）}
legacyImplementation={true}
内容容器样式={{
flexGrow:1.2，
}}
renderItem={（{item}）=>{
返回(
props.navigation.navigate（props.screenName{
用户名：item.username，
snapshotKey:item.snapshotKey，
})
}
>
{item.username}
);
}}
/>
);
};
使用导航导出默认值（订单列表）；

我认为OrdersList组件存在问题，因为当我在每个函数“fetchOrders（）/getRejectedOrders（）”内的setState之后在回调中记录状态时，我得到的是新的被拒绝订单，而不是fetchOrders（）内的订单

尽管

“当我向拒绝订单数组添加/删除数据时，这意味着getRejectedOrders（）只会更改，但fetchOrders（）不会更改，因为它与这些内容不相关。它在第一次获得所有订单，然后根据某些内容对其进行筛选，而这些订单没有更改，所以为什么要更新！”

编辑~1

fetchOrders = async () => {
    const {rejectedOrders, serviceName} = this.state;
    let uid = auth().currentUser.uid;
    const serviceStorage = await AsyncStorage.getItem('service');
    this.setState({serviceStorage});
    // await this.getRejectedOrders();
    database()
      .ref(`Providers/CategoriesOrders/${serviceName || serviceStorage}`)
      .on('value', snapshot => {
        let orderArr = [];
        snapshot.forEach(childSnapshot => {
          orderArr.push({
            snapshotKey: childSnapshot.key,
            username: childSnapshot.val().username,
          });
        });
        this.setState(
          prevState => ({
            orders: orderArr.filter(
              order =>
                !prevState.rejectedOrders.some(
                  key => order.snapshotKey === key,
                ),
            ),
            loading: false,
          }),
          () => console.log(this.state.orders), // I don't git anything if i add or delete rejected orders
        );
        console.log(orderArr); // I don't git anything if i add or delete rejected orders
      });
  };



 getRejectedOrders = async () => {
    let uid = auth().currentUser.uid;
    database()
      .ref(`Providers/users/${uid}`)
      .on('value', snapshot => {
        let rejectedOrders = snapshot.val().rejectedOrders;
        this.setState({rejectedOrders}, () =>
          console.log(this.state.rejectedOrders), // here's i got every single time i add or delete item i can see it in console log
        );
      });
  };




 <OrdersList
          data={this.state.orders}
          extraData={this.state.orders.length} // i add it but it's not effected 
          screenName="OrderHomeDetails"
        />

fetchOrders=async（）=>{
const{rejectedOrders，serviceName}=this.state；
让uid=auth（）.currentUser.uid；
const serviceStorage=await AsyncStorage.getItem（'service'）；
this.setState（{serviceStorage}）；
//等待此消息。getRejectedOrders（）；
数据库（）
.ref（`Providers/CategoriesOrders/${serviceName | | serviceStorage}`）
.on（'value'，快照=>{
设orderArr=[]；
snapshot.forEach（childSnapshot=>{
订单推送({
snapshotKey:childSnapshot.key，
用户名：childSnapshot.val（）.username，
});
});
这是我的国家(
prevState=>({
订单：orderArr.filter(
订单=>
！prevState.rejectedOrders.some(
key=>order.snapshotKey===key，
),
),
加载：false，
}),
（）=>console.log（this.state.orders），//如果我添加或删除被拒绝的订单，我不会git任何东西
);
console.log（orderArr）；//如果我添加或删除被拒绝的订单，我不会git任何东西
});
};
getRejectedOrders=async（）=>{
让uid=auth（）.currentUser.uid；
数据库（）
.ref（`Providers/users/${uid}`）
.on（'value'，快照=>{
让rejectedOrders=snapshot.val（）.rejectedOrders；
this.setState（{rejectedOrders}，（）=>
log（this.state.rejectedOrders），//这是我每次添加或删除项时都能在控制台日志中看到的内容
);
});
};
当使用setState时，可以使用flag isMounted进行检查。关于问题状态不立即更新，您可以使用ref.current查看更改后立即更新。
您应该在
拒绝订单
更新时更新
订单。此外，请记住取消录制侦听器以避免内存泄漏

  constructor(props) {
    super(props);
    this.allOrders = [];
    this.rejectedOrders = [];
    this.state = {
      orders: [],
    }
  }

  componentWillUnmount() {
    database()
      .ref(`Providers/CategoriesOrders/${serviceName || serviceStorage}`)
      .off('value', this.ordersCallback);
    database()
      .ref(`Providers/users/${uid}`)
      .off('value', this.rejectedOrderCallback);
  }

  fetchOrders = async () => {
    ...
    database()
      .ref(`Providers/CategoriesOrders/${serviceName || serviceStorage}`)
      .on('value', this.ordersCallback);
  };

  getRejectedOrders = async () => {
    let uid = auth().currentUser.uid;
    database()
      .ref(`Providers/users/${uid}`)
      .on('value', this.rejectedOrderCallback);
  };

  ordersCallback = (snapshot) => {
    let orderArr = [];
    snapshot.forEach(childSnapshot => {
      orderArr.push({
        snapshotKey: childSnapshot.key,
        username: childSnapshot.val().username,
      });
    });
    this.allOrders = orderArr;
    this.updateData()
  }

  rejectedOrderCallback = (snapshot) => {
    this.rejectedOrders = snapshot.val().rejectedOrders;
    this.updateData();
  }

  updateData() {
    const orders = this.allOrders.filter(order => this.rejectedOrders.some(key => order.snapshotKey === key));
    this.setState({ orders });
  }

您如何在UI上呈现订单？你能显示JSX吗？再次检查@anandudavia我认为
keydextractor={（item，index）=>index.toString（）}
是问题所在。尝试将其更改为
keydractor={（）=>Math.random（）}
。如果有效，则意味着
键
每次都是相同的，这就是列表未更新的原因，您可能想找到一个适当的函数，从
项中提取
key
。遗憾的是，我遇到了以下错误
失败的子上下文类型：提供给“CellRenderer”的类型为“number”的无效子上下文“virtualizedCell.cellKey”，应为“string”。
尝试：
keyExtractor={（）=>Math.random（）.toString（）}
感谢您的回复，但我有两个错误第一个
无法读取未定义的属性“forEach”
2-
警告：列表中的每个孩子都应该有一个唯一的“key”道具。
错误1，您需要更新自己，当您从数据库获取数据时，轮到您准备数据了。错误2，
FlatList
需要每个项目都有一个唯一的id，默认情况下，它将从每个项目获得
id
字段。如果您的订单项没有
id
，则需要在
keydextractor={order=>order.}
中指定一个唯一的值，谢谢您1-但是当我记录快照时，我可以在我的日志中看到所有订单！在刷新应用程序两次或两次以上后，它工作正常，为什么！这是一个很好的方法，但我有一些Q，在
orderscalback（）
中，您调用
this.updateData（this.allOrders）
“带参数”，但在
rejectedOrdersCallback（）
中，您没有将任何参数传递给
this.updateData（）
为什么？它不会影响内存，
updateData
只需准备从
this.allOrders
和
this.rejectedOrders
显示的数据即可。
  constructor(props) {
    super(props);
    this.allOrders = [];
    this.rejectedOrders = [];
    this.state = {
      orders: [],
    }
  }

  componentWillUnmount() {
    database()
      .ref(`Providers/CategoriesOrders/${serviceName || serviceStorage}`)
      .off('value', this.ordersCallback);
    database()
      .ref(`Providers/users/${uid}`)
      .off('value', this.rejectedOrderCallback);
  }

  fetchOrders = async () => {
    ...
    database()
      .ref(`Providers/CategoriesOrders/${serviceName || serviceStorage}`)
      .on('value', this.ordersCallback);
  };

  getRejectedOrders = async () => {
    let uid = auth().currentUser.uid;
    database()
      .ref(`Providers/users/${uid}`)
      .on('value', this.rejectedOrderCallback);
  };

  ordersCallback = (snapshot) => {
    let orderArr = [];
    snapshot.forEach(childSnapshot => {
      orderArr.push({
        snapshotKey: childSnapshot.key,
        username: childSnapshot.val().username,
      });
    });
    this.allOrders = orderArr;
    this.updateData()
  }

  rejectedOrderCallback = (snapshot) => {
    this.rejectedOrders = snapshot.val().rejectedOrders;
    this.updateData();
  }

  updateData() {
    const orders = this.allOrders.filter(order => this.rejectedOrders.some(key => order.snapshotKey === key));
    this.setState({ orders });
  }