反应组件渲染多次

Question

我在和React玩了一会儿，我遇到一个棘手的问题，我想不通。

我有一个笑话组件，该组件基本上应该向const textInputRefs = useRef<(HTMLDivElement | null)[]>([]) ... const onClickFocus = (event: React.BaseSyntheticEvent, index: number) => { textInputRefs.current[index]?.focus() }; ... {items.map((item, index) => ( <textInput inputRef={(ref) => textInputs.current[index] = ref} /> <Button onClick={event => onClickFocus(event, index)} /> } 发出请求并显示结果。发出请求并更新我的状态都在一个方法中完成，然后在componentDidMount（）方法中调用。

这工作得很好，但是我想让组件在单击时向API发出更多请求，因此我尝试做的是将组件的onClick值设置为等于使XMLHttpRequest的方法。

我的问题是，这样做会使我的页面垃圾邮件成为带有请求的api，因此每单击一次就请求各种笑话，而我只希望每单击一次笑话。

代码在下面：

https://sv443.net/jokeapi/v2

非常感谢你们能给我提供的任何见解：）

Answer 1

使用onClick={() => this.getJoke()}或onClick={this.getJoke}。当前，您在调用render时正在运行此函数，并将其结果分配给onClick。

编辑：

应使用上述版本之一代替onClick={this.getJoke()}元素上的<div>。

原因是通过设置onClick={this.getJoke()}，您告诉React on render调用您的getJoke方法，并将其结果分配为运行时的onClick处理程序。现在，由于getJoke()正在发出请求并设置状态值，因此会发生以下情况：

1. React渲染您的组件，运行this.getJoke()
2. 提出请求
3. 将结果设置为状态that.setState({ joke: this.response })
4. 由于状态已更改，React将重新渲染您的组件，但是同样存在onClick={this.getJoke()}，因此将调用您的方法。
5. 回到点2（导致无限循环）