Итак, для начала приведу немного кода, я объясню, чего я пытаюсь достичь, а что не работает дальше:
render() {
return (
<div className='custom-modal'>
<Link to='/c' onClick={this.hideFader}>
<Icon name='close' className='close-button' size='big' />
</Link>
<h1>Your contributions</h1>
{this.props.requests.map(d => {
return (
<div className='chat-thread' key={uuidv1()}>
<Link to={`/c/contribution/${d.id}`}>
<div>
<h2>{d.title}</h2>
<p>{d.description}</p>
<p>ID: {d.id}</p>
</div>
</Link>
<div>
<Icon
name='close'
className='request-delete'
onClick={this.show}
size='big'
/>
<Confirm
open={this.state.open}
content={`Are you sure you want to delete this request? All the information including the chat linked to this request will be deleted!`}
onCancel={this.handleCancel}
onConfirm={this.handleConfirm(d.id)}
size={'mini'}
/>
</div>
</div>
)
})}
</div>
)
}
Так что это мой метод render().
То, что я пытаюсь сделать здесь, это небольшой компонент, который будет перенаправлять на маршрут, я добился этого с помощью <Link />, и смена маршрута работает (он перенаправляет на тот же идентификатор).
Теперь, если вы продолжите читать код, вы увидите это <p>ID: {d.id}</p>.
Это тоже хорошо работает (так что я имею в виду, что идентификатор, который я получил в <Link />, и идентификатор в <p></p> совпадают.
Теперь вот сложная часть, вот конкретная часть, о которой я говорю:
<Icon
name='close'
className='request-delete'
onClick={this.show}
size='big'
/>
<Confirm
open={this.state.open}
content={`Are you sure you want to delete this request? All the information including the chat linked to this request will be deleted!`}
onCancel={this.handleCancel}
onConfirm={this.handleConfirm(d.id)}
size={'mini'}
/>
Эта часть находится в том же возвращении, но по некоторым причинам эта строка возвращает другой идентификатор:
onConfirm={this.handleConfirm(d.id)}
Я проверил это, и первые 2 идентификатора возвращают 1, последний (тот, что выше) возвращает 2 (2 - это идентификатор другого элемента, который загружен, всего 2 с идентификаторами 1 и 2 соответственно ).
Вот мой handleConfirm(id):
handleConfirm = id => () => {
console.log(id)
this.setState({ open: false })
fetch(`http://localhost:3000/requests/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-User-Email': localStorage.getItem('email'),
'X-User-Token': localStorage.getItem('token')
}
})
}
Таким образом, console.log выдает 2, в то время как другие d.id выдают 1
РЕДАКТИРОВАТЬ: Я сделал несколько проверок, и происходит то, что независимо от того, какую кнопку удаления вы нажмете, она будет принимать идентификатор последней. Так что, если есть идентификаторы от 1 до 5, независимо от того, что вы нажимаете, они будут проходить через 5.
Если я сделаю это из <Confirm /> и добавлю onClick() к <Icon /> выше, это будет работать.
Кажется, что это проблема с пакетом semantic-ui-react, но не уверен, кто-нибудь может указать на это?