Invalid Hook Call для кнопки для отправки формы

Question

У меня есть кнопка, которая должна отправить форму в API. Я получаю сообщение об ошибке:

Error: Invalid hook call. Hooks can only be called inside of the body of a function...

Весь мой код находится здесь:

function SubmitButton(props) {
  function SendData(url) {
    const [data, setData] = useState([]);
    const eta = document.getElementById('eta_value')
    async function getData() {
      const options ={
          method : 'POST',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json;charset=UTF-8'
            },
          body: JSON.stringify({
            name:'26',
            eta:'30',
          })
      }
      const response = await fetch(url, options)
          .then(response =>{
              console.log(response.status);
          });
    }
    useEffect(() => {//check this out
      getData();
    }, []);
  };
  const title = props.title;
  //const onSubmit = {SendData}
  return(
      <div id={title}>
        <Button 
        onClick={() => SendData("http://XXX.X.X.X:XXXX/api/")} 
        variant="contained" 
        color="primary">
        </Button>
      </div>
  )
}
export default SubmitButton

Это показывает, что ошибка происходит в:

function SendData(url) {
    const [data, setData] = useState([]);
    const eta = document.getElementById('eta_value')
    async function getData() {

Который вызывается по щелчку. Я устранял неполадки в течение нескольких дней, но не могу понять, почему я нарушаю правила хуков.

Answer 1

Проблема в том, что вы используете хук useState во вложенной функции (ваша функция sendData()).

Как гласит документация Правила хуков :

Только вызовы хуков на верхнем уровне

Не вызывать хуки внутри циклов, условия или вложенные функции. Вместо этого всегда используйте Hooks на верхнем уровне вашей функции React. Следуя этому правилу, вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента. Это то, что позволяет React правильно сохранять состояние хуков между несколькими вызовами useState и useEffect. (Если вам интересно, мы объясним это подробно ниже.)

Чтобы это исправить, переместите оператор const [data, setData] = useState([]); и хук useEffect() на верхний уровень вашего функционального компонента. ,

Надеюсь, это поможет.

Answer 2

Ваши вызовы перехватчиков должны быть на верхнем уровне вашей функции рендеринга ( правила реагирования перехвата ), а не внутри функции SendData

function SubmitButton(props) {
  const [data, setData] = useState([]); 
  function SendData(url) {
    const eta = document.getElementById('eta_value')
    async function getData() {
      const options ={
          method : 'POST',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json;charset=UTF-8'
            },
          body: JSON.stringify({
            name:'26',
            eta:'30',
          })
      }
      const response = await fetch(url, options)
          .then(response =>{
              console.log(response.status);
          });
    }  
  };
  useEffect(() => {
    getData();
  }, []);
  const title = props.title;
  //const onSubmit = {SendData}
  return(
      <div id={title}>
        <Button 
        onClick={() => SendData("http://XXX.X.X.X:XXXX/api/")} 
        variant="contained" 
        color="primary">
        </Button>
      </div>
  )
}
export default SubmitButton

И вам лучше переместить код, который извлекает данные вне функции рендеринга, для удобства чтения, надеюсь, это помогло :)