在 react-native 中更新状态后，React 没有更新视图模板

Question

我正在尝试更新状态 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>

我不知道我必须改变什么？

Answer 1

这可能有帮助

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

Answer 2

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

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

由此改变

<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 匹配，则切换选中的 true/false，如果不匹配，则 return 未修改的对象。

Answer 3

问题

状态突变且未返回更新后的数组。保存的状态参考被保存回状态。

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

在 react-native 中更新状态后，React 没有更新视图模板

React is not updating the view template after updating the state in react-native

setstate

reactjs

react-native

server-side-rendering

use-state

问题

解决方案