Javascript React Native setState不使array.push工作

基本上，每次我选择一个元素（在本例中是一张照片）时，该元素的细节都会插入到名为“photoArray”的数组中。当光阵列的长度大于或等于2时，将“IsCompable”状态设置为true。比较按钮的显示取决于此状态的值。 也就是说，问题在于，当我调用React-setIsComparable方法来设置状态时，此操作会不时重置photoArray，使其充满上一个选定图像的数据，而不是到目前为止所有选定图像的数据。非常奇怪的是，如果我避免调用setState，那么一切都正常工作。设置状态如何导致数组重置

为了方便起见，我附上了一份点心，它显示了我的代码的确切功能以及我向您描述的问题

注：不幸的是，从“网络”版本的零食中看不到图像，但从“安卓”或“iOS”设备中，模拟与我的应用完全一致

---

EXPO零食：

您声明了一个空数组，该数组在重新渲染时自动重新初始化

而是使用

useState

这个很好用

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
import { ProgressCard } from './components/progressCard';
import { NativeBaseProvider, Button } from 'native-base';

export default function App() {
  const [isComparable, setIsComparable] = useState(false);
  const [photoArray, SetphotoArray] = useState([]);

  useEffect(() => {
    setIsComparable(photoArray.length >= 2 ? true : false);
  }, [photoArray]);

  const compareFunc = (group, path) => {
    //il gruppo di quella selezionata esiste già nell'array?
    var elementPos = photoArray
      .map(function (x) {
        return x.group;
      })
      .indexOf(group);
    if (elementPos != -1) {
      //se esiste devo gestirlo come switch
      //controllo se è uno switch o una rimozione
      if (photoArray[elementPos].path != path) {
        let temp = [...photoArray];
        temp[elementPos].path = path;
        SetphotoArray(temp);
      } else {
        let temp = [...photoArray];
        temp.splice(elementPos, 1);
        SetphotoArray(temp);
      }
    } else {
      let temp = [...photoArray];
      temp.push({ group: group, path: path });
      SetphotoArray(temp);
    }

    console.log('photoArray.length', photoArray.length);
    console.log('photoArray', photoArray);
  };

  const DATA = [
    {
      path1: 'FOTO1',
      path2: 'FOTO2',
      path3: 'FOTO3',
    },
    {
      path1: 'FOTO1',
      path2: 'FOTO2',
      path3: 'FOTO3',
    },
    {
      path1: 'FOTO1',
      path2: 'FOTO2',
      path3: 'FOTO3',
    },
  ];

  const renderItem = ({ item, index }) => {
    return (
      <ProgressCard
        compare={compareFunc}
        group={index}
        path1={item.path1}
        path2={item.path2}
        path3={item.path3}
      />
    );
  };

  return (
    <NativeBaseProvider>
      <FlatList
        marginRight={10}
        marginLeft={10}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item, index) => index}
      />
      {isComparable && <Button>OK</Button>}
    </NativeBaseProvider>
  );
}

import React，{useState，useffect}来自“React”；
从“react native”导入{Text，View，StyleSheet，FlatList}；
从“expo常量”导入常量；
从“./components/ProgressCard”导入{ProgressCard}；
从“native base”导入{NativeBaseProvider，按钮}；
导出默认函数App（）{
const[iscompable，setiscompable]=useState（false）；
const[photoArray，SetphotoArray]=useState（[]）；
useffect（（）=>{
SetIsCompable（photoArray.length>=2？真：假）；
}，[photoArray]）；
常量compareFunc=（组，路径）=>{
//你是说你的阵列是什么？
var elementPos=光电阵列
.map（函数（x）{
返回x组；
})
.indexOf（集团）；
如果（elementPos！=-1）{
//se esiste devo gestirlo come开关
//控制开关，控制开关，控制开关
if（photoArray[elementPos].path！=path）{
设温度=[…光阵列]；
temp[elementPos].path=path；
设置光电阵列（temp）；
}否则{
设温度=[…光阵列]；
温度拼接（元件位置1）；
设置光电阵列（temp）；
}
}否则{
设温度=[…光阵列]；
临时推送（{group:group，path:path}）；
设置光电阵列（temp）；
}
log（'photoArray.length'，photoArray.length）；
console.log（'photoArray'，photoArray）；
};
常数数据=[
{
路径1:‘FOTO1’，
路径2:‘FOTO2’，
路径3:‘FOTO3’，
},
{
路径1:‘FOTO1’，
路径2:‘FOTO2’，
路径3:‘FOTO3’，
},
{
路径1:‘FOTO1’，
路径2:‘FOTO2’，
路径3:‘FOTO3’，
},
];
常量renderItem=（{item，index}）=>{
返回(
);
};
返回(
索引}
/>
{iscompable&&OK}
);
}

Kartikey Vaish是正确的。此外，您还应该避免在您的react状态上使用突变（如

push

和

splice

）。React不会检测到这些状态变化，因此不会正确重新启动。选择了

Array

方法，如

map

、

filter

和

reduce

，这些方法可以创建新数组并保持状态不变。通过使用这些方法，您可以使

compareFunc

更加简洁

constcomparefunc=（组，路径）=>{
让elementPos=photoArray.findIndex（e=>e.group==group）；
如果（元素位置！=-1）{
SetphotoArray（photoArray.reduce）（附件、照片、索引）=>{
if（elementPos==索引）{
return photo.path==path？acc:[…acc，{group:photo.group，path:path}]；
}
返回[…附件，照片]
}, []));
}否则{
SetphotoArray（[…photoArray，{group:group，path:path}]）；
}
};

它肯定能工作！！！谢谢