如何設置狀態並將對象推送到數組？

Question

哪有我setState並推到一個數組？ 目前什么都沒有發生...

這是我的代碼

狀態

const [imageData, setImageData] = useState([]);

裁剪圖像

const choosePicture = () => {
    ImagePicker.openPicker({
        width: 300,
        height: 400,
        cropping: true,
    })
        .then(image => {
            onSelectedImage(image);
        })
        .catch(error => {
            console.log(error);
        });
};

設置狀態

const onSelectedImage = image => {
    let newDataImg = imageData;

    let item = {
        id: Date.now(),
        url: image.path,
    };

    newDataImg.push(item);
    setImageData(newDataImg);
};
console.log(imageData);

和平面列表

<FlatList
    data={imageData}
    renderItem={itemData => (
        <View>
            <Image
                source={{uri: itemData.item.url}}
                style={{width: 200, height: 200}}
            />
        </View>
    )}
    keyExtractor={item => item.id.toString()}
/>

Answer 1

您必須復制imageData數組，而不是將其引用放入 newDataImg。

const onSelectedImage = image => {
    // Copy the array
    let newDataImg = [...imageData];

    let item = {
      id: Date.now(),
      url: image.path,
    };

    newDataImg.push(item);
    setImageData(newDataImg);
  };
  console.log(imageData);