0

Пример с проблемой реализован тут: https://codesandbox.io/s/youthful-fast-8dfqj5?file=/src/App.js

Коротко, суть:

  1. Есть Хук useHook, в который передаются функции setState1 и setState2
  2. Хук в свою очередь возвращает кнопку Button
  3. У кнопки в событии onClick вызывается setState1 куда передаётся объект, где одним из полей является someFunction, внутри внутри этой функции вызывается setState2
  4. При использовании кнопки, в неё нужно передать свойство buttonName

В моём варианте реализации, при нажатии на кнопку появляется ошибка:

TypeError setState1 is not a function
   7 | return (
   8 |   <button
   9 |     onClick={() => {
> 10 |       setState1({
     |      ^
  11 |         data: "data from button",
  12 |         callback: someFunction
  13 |       });

Подскажите пожалуйста, как исправить код и допустимый ли это архитектурный подход? Можно ли подобный функционал реализовать иначе? Может тут хук и не нужен

App.jsx

import { useState } from "react";
import useHook from "./useHook";

export default function App() {
  const [state1, setState1] = useState({});
  const [state2, setState2] = useState("");

  const [Button] = useHook(setState1, setState2);

  useEffect(() => {
    console.log("state1", state1);
    console.log("state2", state2);
  }, [state1, state2]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Button buttonName={"name of button"} />
    </div>
  );
}

useHook.jsx

export default function useHook({ setState1, setState2 }) {
  const someFunction = () => {
    setState2("state is setted");
  };

  const Button = ({ buttonName }) => {
    return (
      <button
        onClick={() => {
          setState1({
            data: "data from button",
            callback: someFunction
          });
        }}
      >
        {buttonName}
      </button>
    );
  };

  return [Button];
}
2

1 ответ 1

1

Ваш хук, больше похож на компонент, чем на классический хук. Обычно хук возвращает состояние и функцию для изменения внутреннего состояния.

Если вы хотите оставить как есть, то

Для того, что бы исправить ошибку, необходимо поправить аргументы вашего хука, либо изменить их передачу в сам хук.

Вариант 1(Меняем список аргументов в хуке):

Меняем это

export default function useHook({ setState1, setState2 }) 

На это

export default function useHook(setState1, setState2) 

Вариант 2(Меняем передачу аргументов в хук):

Меняем с

const [Button] = useHook(setState1, setState2);

На

const [Button] = useHook({ setState1, setState2 });
1
  • Спасибо за помощь!
    – Unicode101
    Commented 2 окт. 2023 в 17:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.