Question

我正在处理一个带有 react.js FE、Node/Express.js BE 和数据库的项目。我目前正在开发一个功能，该功能会在 BE 中触发我的删除路由。但是我的函数会在每次加载和点击时触发，但应该只触发 onClick。

这里是我的服务和我的 FE 组件的代码示例。我是 react.js 的新手，所以希望得到帮助。

hardwareService.js：

static deleteHardware(hardwareId) {
    console.log(hardwareId);
    return axios.delete(hostname + '/hardware/' + hardwareId)
        .then(response => {
            return response;
        })
}

组件：

deleteOnClick = (id) => {
    console.log('handleDelete wird ausgeführt!' + id);
    HardwareService.deleteHardware(id);
}

html：

    <tbody>
       {this.state.hardware.map(hardware => (
        <tr key={hardware.id}>
            <td>{hardware.id}</td>
            <td>{hardware.producer}</td>
            <td>{hardware.model}</td>
            <td>{hardware.type}</td>
            <td>{hardware.serial_number}</td>
            <td>{hardware.price}</td>
            <td>{<Button variant="primary">Bearbeiten</Button>}</td>
            <td>{<Button variant="primary" onClick= 
                {this.deleteOnClick(hardware.id)}>Löschen</Button>}</td>
        </tr>
        ))}
</tbody>

Answer 1

替换这一行：

onClick={this.deleteOnClick(hardware.id)}>Löschen</Button>}

有了这个：

onClick={() => this.deleteOnClick(hardware.id)}>Löschen</Button>}

说明：在您当前的代码中，您正在立即调用函数（在呈现组件时），然后将结果作为无效的事件处理程序传递。因此，您需要将函数调用封装在另一个函数中以备将来调用（箭头函数非常适合）。

由于 JavaScript closure 机制，hardware.id 参数将包含在该函数中。

删除函数触发 onLoad 而不是 onClick

1 个答案: