Действие onClick в дочернем компоненте отправляет неправильный элемент - PullRequest
Новая
       32

Действие onClick в дочернем компоненте отправляет неправильный элемент

1 голос
/ 09 июня 2019

Я пытаюсь визуализировать некоторые дочерние компоненты, которые содержат некоторые складные объекты, используя MateralizeCss, и внутри каждой складной вкладки присутствуют три вкладки, и на каждой вкладке есть кнопка, и каждому из складных заголовков присваивается имя, через которое я передаю реквизит.

Теперь при событии OnClick каждой из этих кнопок я вызываю функцию, которая обновляет состояние дочернего компонента с помощью выбранной вкладки ('easy', 'med' или hard), что-то вроде this.setState({active: this.button.parentname}), и возвращаю имя этого сворачиваемого для родителя, но проблема в том, что возвращаемое имя не является правильным, оно является первым дочерним, который был представлен первым.

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

{category: [

    {"name": 1, .. some other properties}, // data of first collapsible 
    {"name": 2, .. some other properties}, // second

]}

Сначала состояние пустое, но позже категория заполняется асинхронно, но я справился с этим.

так что я рендерим это так, 

<ul className="collapsible">
     {this.state.category.length > 0 ? (this.state.category.map(((category, key) => (
    <CategoryCollapsible key={key} category={category} get_name={this.get_name} />
   )))) : null}
</ul>

и на стороне дочернего компонента у меня просто есть тег <li>, внутри которого имя сворачиваемых заголовков this.props.category.name.

и в теле у меня просто есть вкладки с кнопкой onClick, как я определил выше, то есть возвращает имя заголовка сворачиваемого элемента.

Итак, что может быть причиной этого? почему реакция перепутана между двумя визуализированными дочерними компонентами?

Я также проверил реквизиты, используя ComponentDidMount(), и реквизиты верны, но как только происходит событие onClick, реквизиты просто меняются на первые? что это за колдовство? какие-нибудь догадки?

1 Ответ

1 голос
/ 11 июня 2019

Хорошо, я исправил это, на самом деле каждый складной объект нуждался в уникальном идентификаторе, поэтому я просто добавил name в качестве идентификатора складного объекта.

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

...