Пример с проблемой реализован тут: https://codesandbox.io/s/youthful-fast-8dfqj5?file=/src/App.js
Коротко, суть:
- Есть Хук
useHook
, в который передаются функции setState1 и setState2 - Хук в свою очередь возвращает кнопку
Button
- У кнопки в событии
onClick
вызывается setState1 куда передаётся объект, где одним из полей является someFunction, внутри внутри этой функции вызывается setState2 - При использовании кнопки, в неё нужно передать свойство 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];
}