Question

因此，这里有一些代码开始，我将解释我要实现的目标以及接下来不起作用的目标：

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 />实现了这一点，并且路由更改有效（它重定向到相同的ID）。

现在，如果您继续阅读代码，则会看到此<p>ID: {d.id}</p>。这也很好用（所以我的意思是，我在<Link />中获得的ID与<p></p>中获得的ID相同。

现在这是棘手的部分，这是我正在谈论的特定部分：

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

这部分是在同一返回中，但是由于某些原因，这一行返回另一个id： onConfirm={this.handleConfirm(d.id)}

我对此进行了测试，第一个2 id返回1，最后一个（上面一个）返回2（2是另一个加载的元素的id，总共有2个，分别是id 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

编辑：我做了一些检查，结果是，无论您单击哪个删除按钮，它都将使用最后一个的ID。因此，如果ID介于1到5之间，则无论您单击什么，ID都将传入5。如果我在<Confirm />之外执行此操作，并在上方的onClick()上添加<Icon />，则可以正常使用。似乎这是semantic-ui-react软件包的问题，但不确定，有人可以指出吗？

Answer 1

是def is_collision(self, other): return self.distance(other) < 25而不是onConfirm={()=>this.handleConfirm(d.id)}吗？

onConfirm={this.handleConfirm(d.id)}的作用是什么？

ps。我没有足够的代表发表评论

render（）中的变量值更改

1 个答案: