javascript - react - adding item to array in state at a specific index - Stack Overflow

admin管理员组

文章数量:1327974

I have an app im building in reactjs and react native. I have an array in my state that I'm adding image uri's to.

state = {
  images: []
}

The problem lies in that I want to add images uris to this array at a specific index like this

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

}

however, the above doesn't work, can someone point me in the right direction?

Thanks

I have an app im building in reactjs and react native. I have an array in my state that I'm adding image uri's to.

state = {
  images: []
}

The problem lies in that I want to add images uris to this array at a specific index like this

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

}

however, the above doesn't work, can someone point me in the right direction?

Thanks

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Jul 9, 2018 at 19:58 juicy89juicy89 45855 silver badges1414 bronze badges 4

• Can you explain in what way it doesn't work? – Colin Ricardo Commented Jul 9, 2018 at 19:59
• It actually throws a syntax error with unexpected token , – juicy89 Commented Jul 9, 2018 at 20:01
• @juicy89 Yes {images[imageIndex]: result.uri} is not a valid object literal. – Arup Rakshit Commented Jul 9, 2018 at 20:04
• Both your answers worked perfectly as expected. Without sounding ridiculous, is one preferred over the other in a general sense? I only ask as I'm still relatively new to JS – juicy89 Commented Jul 9, 2018 at 20:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Use Array.splice method.

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

It looks like you're trying to modify state somewhat directly. Try this instead:

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

A new array should be created with a different value in that index. We want to make a new array because it is an antipattern to mutate state. The new array can be created by making a copy of this.state.images and modifying the value at the specific index.

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

Array.prototype.map can be leveraged to make this code a bit more functional.

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

本文标签： javascriptreactadding item to array in state at a specific indexStack Overflow