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

Question

我正在尝试调用函数从 api 中获取数据并显示数据。但是当我调用这个函数时，页面刷新并且状态被重置所以页面不显示任何东西。

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

<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>

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

How to stop page refresh when function is called - React

javascript

events

reactjs

react-hooks

use-effect