Почему удаляется последний элемент из массива в state?

Question

[Sanchik97]

Добрый день! Есть два компонента, в одном из которых кнопка, которая по клику вызывает второй компонент. Компонент может быть вызван несколько раз, поэтому он лежит в массиве state. Внутри второго компонента есть кнопка удалить. Но при нажатии удаляется не выбранный элемент, а последний в массиве. Почему так происходит?

Первый компонент:

spoiler

import React from 'react'
import { AnswerInput } from '../AnswerInput/AnswerInput'

class QuestionInput extends React.Component {
	state = {
		answers: []
	}

	removeAnswerHandler = index => {
		this.state.answers.splice(index, 1)
		this.setState({
			answers: this.state.answers
		})
	}

	addAnswerInputHandler = () => {
		this.setState({
			answers: [
				...this.state.answers,
				<AnswerInput removeAnswerHandler={this.removeAnswerHandler} />
			]
		})
	}

	render() {
		return (
			<div>
				{this.state.answers.map((item, index) => (
					<div key={index}>{item}</div>
				))}
				<div className="mt-3 mb-3 ml-2">
					<p className="link  text-secondary">
						<i
							className="fas fa-plus"
							onClick={() => this.addAnswerInputHandler()}
						/>
					</p>
				</div>
			</div>
		)
	}
}

export default QuestionInput

Второй компонент:

spoiler

import React from 'react'
import { Input } from 'reactstrap'

export class AnswerInput extends React.Component {
	render() {
		return (
			<div className="d-flex align-items-center">
				<Input
					className="answerinput"
					placeholder="Ответ клиента"
					defaultValue=""
				/>
				<i
					className="far fa-trash-alt link ml-2 mr-2 text-secondary"
					onClick={index => {
						this.props.removeAnswerHandler(index)
					}}
				/>
				<i className="far link ml-2 mr-2 fa-copy text-secondary" />
			</div>
		)
	}
}

Answer 1

[forspamonly2]

удаляется не то, что вы хотели, потому что вы нигде не передаёте тот index. обработчик события получает параметром объект события, так что в вашем onClick={index => { совсем не индекс там приходит.
а почему последний - ума не приложу, вроде бы должен первый.

в любом случае, вы что-то не то делаете. складировать компоненты с полями ввода в массиве не нужно. вы же наверное как-то оттуда значения получать собираетесь? храните в массиве сами введённые значения, второй свой компонент переделайте на функциональный, а в основном компоненте мапьте на него те значения и индексы.

Comments

[Sanchik97]

По поводу первого понятно, можно переделать, а вот по поводу второго есть вопросы. Что значит хранить в массиве сами введённые значения? Главная задача - выводить компонент AnswerInput при нажатии на кнопку "добавить" в компоненте QuestionInput, для этого мне нужен массив, в котором и будут храниться компоненты
AnswerInput!

[forspamonly2]

вы-то его выведете, а юзер, небось, туда набирать что-то станет сдуру. так что обрабатывать введённое вам рано или поздно придётся. почитайте про Controlled Components как это там принято делать.

ну и вам будет проще (не эффективнее, а именно проще) всего иметь модель данных всех этих инпутов в родительском компоненте. а при рендере отрисовывать по списку вложенные компоненты, передавая туда данные из модели, методы для удаления/обновления и тот самый индекс.

Answer 2

[halfcupgreentea]

Проблема в key. У вас используется индекс и он конечно съезжает при вырезании элементов посередине. Почитайте про то, для чего он нужен и как работает в документации по реакту.
Решение: храните в state не компоненты а какие нибудь уникальные числа для каждого аудио инпута, используйте эти уникальные числа в качестве key

Comments

[terasbetoni]

Дружище, как же ты спас намекнув про key. Я то передавал ID в виде параметра и как полагается, но не знал что он должен строго называться key, думал можно назвать как удобно. Несколько дней ломал голову, не понимая почему реакт неправильно отображает, хотя внутри массива всё верно добавляется и удаляется. Специально даже зарегался, чтобы поблагодарить :)