javascript - 我可以从外部组件使用 useReducer
问题描述
现在我正在尝试使用 useReducer 创建一种管理状态和功能的新方法,但现在发现问题是“只能在函数组件的主体内部调用 Hooks” 有什么办法可以解决这个问题吗?
// App Component
import React from "react";
import { product, productDis } from "./ProductReducer";
//{product} is state, {productDis} is dispatch
import { total } from "./TotalReducer";
//{total} is state and i dont need {totalDis}
const App = () => {
return (
<div>
<button onClick={()=>productDis({type:'add',payload:'pen'})}>add</button>
{product} {total}
</div>
);
};
export default App;
// ProductReducer Component
import React, { useReducer } from 'react';
import {totalDis} from './TotalReducer'
//{totalDis} is dispatch and i dont need {total}
export const [product, productDis] = useReducer((state, action) => {
switch (action.type) {
case "add": {
const product_0 = 'pencil'
const product_1 = `${action.payload} and ${product_0}`
totalDis({
type:'total_add',
payload:'250'
})
return product_1;
}
default:
return state;
}
}, []);
// TotalReducer Component
import React, { useReducer } from 'react';
export const [total, totalDis] = useReducer((total, action) => {
switch (action.type) {
case "total_add": {
const vat = action.payload*1.15
return vat;
}
default:
return total;
}
}, 0)
当我单击显示屏上的按钮时,它应该显示...“钢笔和铅笔 287.5”
但它显示“只能在函数组件的主体内部调用挂钩”
有什么办法可以解决这个问题?还是我应该回归自然?
解决方案
React 钩子应该只在功能组件内部调用。每个组件实例都维护挂钩状态。如果必须重用钩子,可以将它们提取到自定义钩子中,这些钩子是调用内置钩子的函数,应该在功能组件内部调用:
export const useTotal = () => {
const [total, totalDis] = useReducer((total, action) => {...}, 0);
...
return [total, totalDis];
};
如果需要为多个组件维护公共状态,则应在公共父级中维护它并通过道具提供给子级:
const Root = () => (
const [total, totalDispatcher] = useTotal();
return <App {...{total, totalDispatcher}}/>
);
const App = props => {
return (
<div>{props.total}</div>
);
};
或上下文 API:
const TotalContext = createContext();
const Root = () => (
<TotalContext.Provider value={useTotal()}>
<App/>
</TotalContext.Provider>
);
const App = () => {
const [total] = useContext(TotalContext);
return (
<div>{total}</div>
);
};