按钮刷新页面，并且UseEffect不起作用

Question

我的react.js项目中有两个按钮，当我点击css时应该切换。为此，我onClick调用一个函数flip该函数将状态pathoButton的值从 true 更改为 false(反之亦然)。然后我有一个useEffect，它应该只在更改pathoButton时运行，这会改变html。出于某种原因，每次我单击一个按钮时，整个页面都会刷新，我不确定这是什么课程。下面是一些代码的片段。

最初设置病理按钮的位置

const [userSettings, setuserSettings] = useState(
{
pathoButton: true,
} 
);

单击treatmentButton时pathologyButton和treatmentButton的两个按钮flip称为

return (
<div className="input-group top-gap">
<form className="form-length">
<div className="input-group">
<button className="pathologyButton">  <dt>Pathology</dt> </button>
<button className="treatmentButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
</div>
<div className="svg-form">
{displayAnimal()}

</div>

</form>
<form className='form-length'>
<input type="Animal" class="animal-input" placeholder="Search by owner name or animal..." /> 
</form>
</div>
);

翻转和我的使用效果，我已经尝试过window.location.reload(false);但它不起作用

function flip(e){
window.location.reload(false);
const pathoB = ! userSettings.pathoButton        
setuserSettings((prevState) => {
return { ...prevState, pathoButton: pathoB };
});
}
useEffect(() => {
console.log(userSettings.pathoButton, '<---lognnn')
if (userSettings.pathoButton) {
return (<div> 
<button className="pathologyButton" onClick={()=>flip()}>  <dt>Pathology</dt> </button>
<button className="treatmentButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
</div>)
} else {
return (<div>
<button className="treatmentButton" onClick={()=>flip()}>  <dt>Pathology</dt> </button>
<button className="pathologyButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
</div>
)
}
}, [userSettings.pathoButton])

对不起，如果这是一个问题的转发！ 我不认为是，但可能因为我不确定是什么原因导致页面刷新，任何帮助或建议都会很棒！

Answer 1

试试看。

const [userSettings, setuserSettings] = useState({pathoButton: true});
function flip(e){
const pathoB = !userSettings.pathoButton    
setuserSettings((prevState) => { ...prevState, pathoButton: pathoB });
}
function buttons() {
if (userSettings.pathoButton) {
return (
<div> 
<button className="pathologyButton" onClick={()=>flip()}> <dt>Pathology</dt> </button>
<button className="treatmentButton" onClick={()=>flip()}> <dt>Treatment</dt> </button> 
</div>
)
} else {
return (
<div>
<button className="treatmentButton" onClick={()=>flip()}> <dt>Pathology</dt> </button>
<button className="pathologyButton" onClick={()=>flip()}> <dt>Treatment</dt> </button> 
</div>
)
}
}
return (
<div className="input-group top-gap">
<form className="form-length">
{buttons()}
<div className="svg-form">
{displayAnimal()}
</div>
</form>
<form className='form-length'>
<input type="Animal" class="animal-input" placeholder="Search by owner name or animal..." /> 
</form>
</div>
);

函数返回的按钮也是如此，因为它们的顺序取决于状态。

忘记这样做的useEffect，因为 click 事件已经设置了状态，该状态已经重新呈现了组件。

使用按钮type="button"阻止表单提交...并且永远不要再使用window.reload，除非您知道所有其他组件状态，Redux存储以及您能想到的所有内容也将重置，这就是您想要的。

Answer 2

button的默认type属性是submit，这意味着当您使用

<form>
<button>test</button>
</form>

此按钮提交表单。同样，默认情况下，无需执行任何其他操作，表单将按GET提交，因此在您的情况下，这会给您重新加载。

如果您不希望按钮提交表单，则必须在按钮上指定type="button"：

<form>
<button type="button">this does not submit the form</button>
</form>