如何在调用React函数时停止页面刷新

Question

我正试图调用一个函数来从api中获取数据并显示数据。然而，当我调用此函数时，页面会刷新并重置状态，因此页面不会显示任何内容。

在子组件中，我有一个输入框和一个表单。在提交时，此表单将把输入保存到父组件中的状态(listOfNames(。我连接，因为状态是一个数组，可以随时添加到其中搜索更多名称。结果显示在表中

<Form onSubmit={() => props.setListOfNames(props.listOfNames.concat(localName))}>
<InputGroup>
<FormControl type="text" placeholder="Add Name" onChange={(e) => setLocalName(e.target.value)}/>
<Button variant="outline-secondary" type="submit" variant="primary">Button</Button>
</InputGroup>
</Form>

在父级中，我有一个UseEffect，它检测到此状态的更改。

useEffect(() => {
searchNames();
}, [listOfNames]);

在更改时，它将调用函数(searchNames(从api中获取数据。fetch函数使用listOfNames状态进行搜索。

const searchNames = () =>{
//e.preventDefault(); doesn't work even with 'e' as param
fetch(API_URL, {
method:'POST',
headers: { "Content-Type": "application/json; charset=utf-8"},
body: JSON.stringify(listOfNames)
})
//... and so on

然而，当我调用此函数时，整个页面都会刷新，数据不会显示，因为刷新会在搜索之前将listOfNames状态重置为零。我想知道是否可以将事件传递给此函数，以便preventDefault((或者是否有其他解决方案。

Answer 1

onSubmit的默认行为是刷新页面，您可以执行event.preventDefault()来防止类似的默认行为

<Form onSubmit={(event) => {
event.preventDefault()
props.setListOfNames(props.listOfNames.concat(localName))
}}>
<InputGroup>
<FormControl type="text" placeholder="Add Name" onChange={(e) => setLocalName(e.target.value)}/>
<Button variant="outline-secondary" type="submit" variant="primary">Button</Button>
</InputGroup>
</Form>