自定义挂钩中的useEffect在多个地方使用挂钩时冻结我的react本机应用程序

Question

我创建了一个自定义挂钩，它从使用异步存储的api中获取设置。

// Takes the key/name of the setting to retrieve
export const useSettings = (key) => {
// stores the json string result in the setting variable
const [setting, setSetting] = useState("");
const deviceStorage = useContext(DeviceStorageContext);
useEffect(() => {
getValue()
.then(value => setSetting(value));
}, []);
// gets value from my custom api that uses Async-Storage to handle r/w of the data.
const getValue = async () => await deviceStorage.getValueStored(key);

const setValue = async (value) => { 
await deviceStorage.setValueStored(key, value);
getValue().then(value => setSetting(value));
};

const removeValue = async () => { }
return [setting, { setValue,removeValue }];
};

这在Main.jsx中正常工作，没有任何问题。

const Main = () => {
const [units, operations] = useSettings('units');
useEffect(() => {
const initSettings = async () => {
if (units) {
console.log(units)
return;
}
await operations.setValue({ pcs: 1, box: 20 });
};
initSettings();
}, []);

然而，当我在Form.jsx中调用useSetting钩子并访问该页面时，它会将我的整个应用程序冻结到该页面。

const FormView = ({ handleReset, handleSubmit }) => {
const [setting,] = useSettings('units');

删除useState和useEffect可以修复它并直接调用这些方法，但我真的不想在整个项目中调用getValue((并使用async/await代码来处理它

困在这上面好几个小时了。任何帮助都将不胜感激。

谢谢。

Answer 1

是FormView中的一个下拉组件库把它搞砸了。删除该库修复了它。