Как обновить состояние массива в реакции native?

Я пытаюсь обновить только один элемент в состоянии массива, но я не уверен, как это сделать.

Государство

constructor(props) {
    super(props);
    this.state = {
        markers: [],
    };
}

Установка состояния

 setCurrentLocation() {
    var root = this;
    root.setState({
        markers: [
            ...root.state.markers,
            {
                coordinate: {
                    latitude: parseFloat(root.state.currentLat),
                    longitude: parseFloat(root.state.currentLon)
                },
                key: root.state.currentLat,
                image: pinCurrentLocation

            },
        ],
    });
}

Если я хочу изменить ключ в четвертом элементе маркера, как это сделать?

Спасибо

Ответ 1

Важным моментом является то, что мы не должны напрямую мутировать массив состояний, всегда делать изменения в новом массиве, а затем использовать setState для обновления значения состояния.

Как предположил Док:

Никогда не мутируйте this.state напрямую, обрабатывайте this.state, как если бы он был неизменным.

Основной поток обновления массива состояний:

1- Сначала создайте копию массива состояний.

2- Найти индекс элемента (если индекс доступен, пропустите этот).

3- Обновить значение элемента в этом индексе.

4- Используйте setState для обновления значения состояния.

Возможны множественные решения:

1- Используйте array.map и проверьте, какой элемент вы хотите обновить, когда вы обнаружите, что этот элемент возвращает новый объект для него с обновленным значением ключа, иначе просто верните тот же объект. Как это:

let newMarkers = markers.map(el => (
      el.name==='name'? {...el, key: value}: el
))
this.setState({ markers });

2- Мы также можем использовать array.findIndex для поиска индекса этого конкретного элемента, а затем обновить значения этого элемента. Как это:

let markers = [...this.state.markers];
let index = markers.findIndex(el => el.name === 'name');
markers[index] = {...markers[index], key: value};
this.setState({ markers });

Петля не требуется, если мы знаем индекс элемента, непосредственно мы можем написать:

let markers = [ ...this.state.markers ];
markers[index] = {...markers[index], key: value};
this.setState({ markers });

Ответ 2

Попробуйте использовать функцию create

onEditComparatorClicked(i) {
   let editableComparatorIndexes = [...this.state.markers];
   editableComparatorIndexes[i] = 1;
   this.setState({editableComparatorIndexes});
}

Ответ 3

Да, это возможно. Из кода: setState()

Это называется мелким слиянием.

 this.setState({mykey: 'my new value'});

Однако вам нужно знать key. Вы не должны полагаться на 4-й или 2-й, на любой другой элемент. Только key. Вы всегда должны знать это, потому что вы создаете логику.