Javascript 在表单提交时调用React自定义钩子

我创建了一个自定义的useFetch钩子，以便在应用程序中的几个不同区域发出API请求。它正在使用的一个实例是在渲染组件时，因此它可以按预期工作。但是，我有另一个地方，当用户提交表单时，会在那里提出请求。在handleSubmit中显示{data}的行中，我遇到了一个错误，指出“预期的是一个赋值或函数调用，而看到的是一个表达式”

App.js：

import { useFetch } from "./components/useFetch";

function App() {
  const [value, setValue] = useState([]);
  const {data} = useFetch("search", value);

  const handleChange = event => {
    setValue(event.target.value);
  };

  const handleSubmit = event => {
    event.preventDefault();
    setData("search", value);
  };

  return (
    <Form onSubmit={handleSubmit}>
       <Form.Group>
           <InputGroup className="mb-3">
               <FormControl value={value} onChange={handleChange} placeholder="Search" aria-label="Search" aria-describedby="basic-addon2" />
                  <InputGroup.Append>
                    <Button type="submit" variant="primary">Search</Button>
                  </InputGroup.Append>
                </InputGroup>
              </Form.Group>
            </Form>
    {data.map(data => (
      <p>{data.description}</p>
    ))}
  );
}

嗯

如果需要再次触发钩子，可以更改数据或添加触发器函数，以便在钩子中：

const doStuff =   async () => {
  const response = await fetch(`http://127.0.0.1:8443/${endpoint}/${value}/?key=key`, {
    mode: 'cors',
    credentials: 'include'
  })
    .then(res => res.json())
    .then(
      (json) => {
        setIsLoaded(true);
        setData(json.result);
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    )
};
}


 useEffect(doStuff, [endpoint, value]);


  return {data, doStuff};

嗯

如果需要再次触发钩子，可以更改数据或添加触发器函数，以便在钩子中：

const doStuff =   async () => {
  const response = await fetch(`http://127.0.0.1:8443/${endpoint}/${value}/?key=key`, {
    mode: 'cors',
    credentials: 'include'
  })
    .then(res => res.json())
    .then(
      (json) => {
        setIsLoaded(true);
        setData(json.result);
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    )
};
}


 useEffect(doStuff, [endpoint, value]);


  return {data, doStuff};

---

在

handleSubmit

函数中，这个

{data}

代码应该做什么？使用值的当前状态更新数据变量添加更多详细信息please@picklerick我已经用

handleSubmit

函数中的所有相关代码更新了帖子，这是什么

{data}

code是否应该执行？使用当前状态的值更新数据变量添加更多详细信息please@picklerick我已经用所有相关代码更新了帖子

const doStuff =   async () => {
  const response = await fetch(`http://127.0.0.1:8443/${endpoint}/${value}/?key=key`, {
    mode: 'cors',
    credentials: 'include'
  })
    .then(res => res.json())
    .then(
      (json) => {
        setIsLoaded(true);
        setData(json.result);
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    )
};
}


 useEffect(doStuff, [endpoint, value]);


  return {data, doStuff};