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

【问题标题】：React native not updates the UI after useState()在 useState() 之后 React Native 不更新 UI
【发布时间】：2021-03-06 03:35:13
【问题描述】：

我正在尝试使用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
 },
 ...
]

【问题讨论】：

标签： reactjs react-native fetch nested-lists use-state

【解决方案1】：

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

【讨论】：

请告诉我更多关于你想做什么的信息，因为如果你想循环数据，你可以使用<FlatList /> And I Can Tell You How
我正在使用功能组件，所以我正在使用 useState Hook,..
我不知道你可以让它类组件并使用setState()它会更容易

【解决方案2】：

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

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

【讨论】：