【问题标题】：React is not updating the view template after updating the state in react-native更新 react-native 中的状态后，React 未更新视图模板
【发布时间】：2021-03-05 21:10:15
【问题描述】：

我正在尝试通过onPress 更新状态，事件状态已更新但视图没有改变


<View style={styles.dropDownMenu}>
                {
                    dataLoaded ?
                        retrivedData.map((item) => {
                            return (
                                <TouchableWithoutFeedback onPress={() => {
                                    let changedState = retrivedData
                                    changedState.map((dataItem) => {
                                        if(dataItem.id == item.id){
                                            dataItem.checked = !dataItem.checked
                                            console.info('data matched')
                                        }
                                    })
                                    setRetrivedData(changedState,console.log(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={'chevron-small-down'} type='entypo' />
                                            <Text>{item.checked ? 'True' : 'False'}</Text>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                            )
                        }) :
                        <Text>NULL</Text>
                }
            </View>

我不知道我要改变什么？

【问题讨论】：

标签： reactjs react-native server-side-rendering setstate use-state

【解决方案1】：

问题

状态突变并且不返回更新的数组。保存的状态引用被保存回状态。

onPress={() => {
  let changedState = retrivedData; // <-- state reference

  changedState.map((dataItem) => { // <-- map return not saved
    if (dataItem.id == item.id) {
      dataItem.checked = !dataItem.checked; // <-- state mutation
      console.info("data matched"); // <-- missing map return
    }
  });
  setRetrivedData(changedState, console.log(retrivedData)); // <-- setRetrivedData accepts single argument
}}

解决方案

将现有状态数组映射到新数组
正在更新复制元素

处理程序

onPress={() => {
  setRetrivedData((retrivedData) =>
    retrivedData.map((dataItem) => {
      if (dataItem.id == item.id) {
        dataItem.checked = !dataItem.checked;
        return {
          ...dataItem,
          checked: !dataItem.checked
        };
      }
      return dataItem;
    })
  );
}}

【讨论】：

【解决方案2】：

我没有通过你的逻辑，但我在你的 .map 循环中看到了一个错误。

.map 返回一个数组。所以你需要改成这个。

从此改变

<TouchableWithoutFeedback onPress={() => {
                                    let changedState = retrivedData
                                    changedState.map((dataItem) => {
                                        if(dataItem.id == item.id){
                                            dataItem.checked = !dataItem.checked
                                            console.info('data matched')
                                        }
                                    })
                                    setRetrivedData(changedState,console.log(retrivedData));
                                }} >

到这个。

<TouchableWithoutFeedback onPress={() => setRetrivedData(retrivedData.map((dataItem) => dataItem.id == item.id ? { ...dataItem, checked: !dataItem.checked } : dataItem
)) }>

您使用三元运算符，如果 ID 匹配，则切换选中的真/假，如果不匹配则返回未修改的对象。

【讨论】：

【解决方案3】：

这可能会有所帮助

 <TouchableWithoutFeedback onPress={() => {
       let changedState = [...retrivedData]; // Try this way
        .....
       setRetrivedData(changedState,console.log(retrivedData));
    }} >
       ......
 </TouchableWithoutFeedback>

【讨论】：