React Native 在 useState() 之后不更新 UI

Question

我正在尝试使用 express、

呈现 react-native 中的嵌套列表

最初我使用 onPress 事件更新第一级列表的状态我试图通过将那个特定的 subList 对象嵌套到 appropirate list object 中来更新状态。

这是我的代码

<TouchableWithoutFeedback
 onPress={ async () => {
                                 fetch(`http://192.168.64.1:3000/getTypes/${item.id}`, {
                                        method: 'GET',
                                        headers: {
                                            Accept: 'application/json',
                                            'Content-Type': 'application/json'
                                        }
                                    })
                                    .then((response) => response.json())
                                    .then((data) => {
                                        let changedState = [...retrivedData]
                                        changedState.map((dataItem) => {
                                            if(dataItem.id == item.id){
                                                dataItem.checked = !dataItem.checked
                                                dataItem.subCategory = data
                                            }
                                        })
                                        setRetrivedData(changedState);
                                        console.warn(retrivedData);
                                    })
                                }} >
                                    <View key={item.id}>
                                        <View style={styles.menus} key={item.id}>
                                            <Text style={[{ fontWeight: 'normal', color: 'black' }, styles.menuTitle]}>{item.name}</Text>
                                            <Icon style={styles.icon} name={item.checked ? 'chevron-small-up' : 'chevron-small-down' } type='entypo' />
                                        </View>
                                        {item.checked &&
                                            retrivedData.map((category) => {
                                                if(category.categoriesId == item.id){
                                                    if(category.subCategory.length > 0)
                                                    {
                                                        category.subCategory.map((subItem) => {
                                                            return(
                                                                <View style={styles.subMenus}>
                                                                    <Text style={styles.subMenu}>{subItem.name}</Text>
                                                                </View>
                                                            )
                                                        })
                                                    }
                                                }
                                            })                                            
                                        }
                                    </View>
                                </TouchableWithoutFeedback>

这是我更新前的状态

[
 {"checked": true, 
  "id": 1, 
  "name": "clothing",
  "productCategoryId": 1,
 },
 {
  "checked": false,
  "id": 2, 
  "name": "footwear",
  "productCategoryId": 1
 },
 ...
]

这是我更新后的代码

[
 {"checked": true, 
  "id": 1, 
  "name": "clothing",
  "productCategoryId": 1,
  "subCategory": [
     [Object],
     [Object],
     [Object],
     [Object],
     [Object],
     [Object]
  ]
 },
 {
  "checked": false,
  "id": 2, 
  "name": "footwear",
  "productCategoryId": 1
 },
 ...
]

Answer 1

要更新 UI 您必须使用 this.setState() 方法对您尝试放入状态的数据更新状态，这将自动重新呈现 UI

Answer 2

我使用的是嵌套 map 方法，因此它会在 map 方法完成其过程之前设置状态....

我已经通过在安装时一直获取来解决这个问题.. 谢谢，

React Native 在 useState() 之后不更新 UI

React native not updates the UI after useState()

nested-lists

fetch

reactjs

react-native

use-state