Reactjs 使用useReducer钩子时，react中的重新渲染过多

在使用useReducer react钩子时，我遇到了一个奇怪的问题，我知道错误的来源，但我不知道为什么它会出现在我的代码中

import React, { useReducer } from 'react'

import { Button } from 'react-bootstrap'


export default function User() {

const initialState = {
    lowScore: 0,
    mediumScore: 0,
    hightScore: 0 
}

const reducer = (state, action) => {
    switch(action.type){
        case 'LOW':
            return {
                ...state,
                lowScore: state.lowScore + 1
            }
        case 'MEDIUM':
            return {
                ...state,
                mediumScore: state.mediumScore + 1
            }
        case 'HIGH':
            return {
                ...state,
                hightScore: state.hightScore + 1
            }
        default:
            return state
    }
}

const [state, dispatch] = useReducer(reducer, initialState)

return (
    <div>
        Low: { state.lowScore }, medium: { state.mediumScore }, hight: { state.hightScore } 
        <Button onClick={dispatch('LOW')}>Increment low</Button>
        <Button >Increment medium</Button>
        <Button >Increment hight</Button>
    </div>
)
}

我只在用户单击按钮时发送操作，因此我无法确定它是如何导致多次渲染的

---

渲染组件时，任何解释都是宝贵的。您没有单击就调用了函数dispath。您应该将回调传递给event onClick：

正确更新操作使其正常工作：

   <Button onClick={() => dispatch({type: 'LOW'})}>Increment low</Button>

---

渲染组件时。您没有单击就调用了函数dispath。您应该将回调传递给event onClick：

正确更新操作使其正常工作：

   <Button onClick={() => dispatch({type: 'LOW'})}>Increment low</Button>

---

组件将在以下情况下重新播放：1其道具更改，2其状态更改，3其父组件重新播放。很难从您提供的代码中诊断出这三个操作中的哪一个，而不是您执行的调度操作shown@rantao调度操作将更新状态，所以为什么很难知道是哪一个导致了重新招标？我是说有不止一个原因可以解释为什么您的组件可能会重新招标，您只显示了识别三个原因之一的代码@ⵍⵢⴻⵙ 下面的答案解决了你的问题吗？如果是，请选择它作为正确答案单击答案旁边的复选标记，以结束此问题并奖励声誉分数。那会帮助我们的。否则，请在答案下添加评论，或用更多信息更新您的问题，其他人将尝试提供帮助。非常感谢！组件将在以下情况下重新播放：1其道具更改，2其状态更改，3其父组件重新播放。很难从您提供的代码中诊断出这三个操作中的哪一个，而不是您执行的调度操作shown@rantao调度操作将更新状态，所以为什么很难知道是哪一个导致了重新招标？我是说有不止一个原因可以解释为什么您的组件可能会重新招标，您只显示了识别三个原因之一的代码@ⵍⵢⴻⵙ 下面的答案解决了你的问题吗？如果是，请选择它作为正确答案单击答案旁边的复选标记，以结束此问题并奖励声誉分数。那会帮助我们的。否则，请在答案下添加评论，或用更多信息更新您的问题，其他人将尝试提供帮助。非常感谢！要使其工作，您应该调度一个属性类型为-=>dispatch{type:'LOW'}@VietDinh my bad的对象，谢谢，我仍然不理解react的行为，在呈现组件时，调度'LOW'是否会导致多个重新渲染器。您已将函数dispath'LOW'的结果添加到事件lick中。将调用该函数。然后dispath将返回组件的新状态。若返回状态并没有变化，函数组件将不会被重新呈现。但是，react可能有语法检测，在某些情况下会使无穷循环成为返回函数中的“always call setState”。您的情况下，它总是调用dispath。为了使它工作，您应该调度一个属性类型为-=>dispatch{type:'LOW'}@VietDinh my bad的对象，谢谢，我仍然不理解react的行为，在呈现组件时，调度'LOW'是否会导致多个重新渲染器。您已将函数dispath'LOW'的结果添加到事件lick中。将调用该函数。然后dispath将返回组件的新状态。若返回状态并没有变化，函数组件将不会被重新呈现。但是，react可能有语法检测，在某些情况下会使无穷循环成为返回函数中的“always call setState”。你的案子总是叫dispath。