react-將項目添加到處於特定索引狀態的數組

Question

我有一個應用程序即時通訊在reactjs中構建並響應本機。 我有一個要添加圖像uri的數組。

state = {
  images: []
}

問題在於，我想像這樣在特定索引處將圖像uris添加到此數組

//pass the index I want the image uri assigned to

pickImage = (imageIndex) => {
  let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [4, 3],
  });

  if (!result.cancelled) {
      this.setState({images[imageIndex]: result.uri})
  }

}

但是，以上方法不起作用，有人可以向我指出正確的方向嗎？

謝謝

Answer 1

使用Array.splice方法。

this.setState(prevState => {
  const { images } = prevState;
  images.splice(imageIndex, 0, result.uri);
  return images;
})

Answer 2

看來您正在嘗試直接修改狀態。 嘗試以下方法：

pickImage = (imageIndex) => {
  let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [4, 3],
  });

  const images = { ...this.state };
  images[imageIndex] = result.uri;

  if (!result.cancelled) {
      this.setState({ images })
  }

Answer 3

應該使用該索引中的其他值創建一個新數組。 我們要制作一個新數組，因為它是改變狀態的反模式。 可以通過復制this.state.images並修改特定索引處的值來創建新數組。

const copyOfImages = [...this.state.images];
copyOfImages[imageIndex] = newValue;
this.setState({images: copyOfImages});

可以利用Array.prototype.map使此代碼更具功能性。

this.setState(previousState => ({
  images: previousState.images.map(
    (image, index) => index === imageIndex ? result.uri : image
  );
});