我正在尝试构建自己的第一个相对较大的项目,至少对于我的经验水平来说是如此。
我在很大程度上依赖于useContext与useStates hooks的组合来处理不同组件之间的逻辑。随着时间的推移,跟踪所有这些不同状态的变化和简单的onClick事件开始变得困难,我必须更改许多状态的逻辑。
希望能得到一点个人建议,指引我正确的方向。 因为我做的事情似乎并不正常,或者这就是React的现实吗? 肯定有更聪明的方法来减少状态逻辑管理的数量。
以下是我正在使用的一些代码片段。
希望能得到一点个人建议,指引我正确的方向。 因为我做的事情似乎并不正常,或者这就是React的现实吗? 肯定有更聪明的方法来减少状态逻辑管理的数量。
以下是我正在使用的一些代码片段。
const onClick = (note: INote) => {
SetAddNote(false);
SetNote(note);
onSelected(note)
SetReadOnly(true);
SetEditor(note.data.value);
SetInputValue(note.data.name);
SetCategory(note.data.category);
};
const { note, noteDispatch, SetNoteDispatch } = useContext(NoteContext);
const { categories } = useContext(CategoriesContext);
const [ editMode, setEditMode ] = useState(false);
const [ module, setModule ] = useState<{}>(modulesReadOnly)
const [inputValue, setInputValue] = useState<string>('');
const [category, setCategory] = useState('');
const [color, setColor] = useState('');
import React, { createContext, useState } from 'react';
type EditorContextType = {
editor: string;
SetEditor: React.Dispatch<React.SetStateAction<string>>;
readOnly: boolean;
SetReadOnly: React.Dispatch<React.SetStateAction<boolean>>;
inputValue: string;
SetInputValue: React.Dispatch<React.SetStateAction<string>>;
category: string;
SetCategory: React.Dispatch<React.SetStateAction<string>>;
};
type EditorContextProviderProps = {
children: React.ReactNode;
};
export const EditorContext = createContext({} as EditorContextType);
export const EditorContextProvider = ({
children,
}: EditorContextProviderProps) => {
const [editor, SetEditor] = useState('');
const [readOnly, SetReadOnly] = useState(false)
const [inputValue, SetInputValue] = useState('');
const [category, SetCategory] = useState('');
return (
<EditorContext.Provider value={{ editor, SetEditor, readOnly, SetReadOnly, inputValue, SetInputValue, category, SetCategory }}>
{children}
</EditorContext.Provider>
);
};
我可以将几个州合并成一个,但似乎这样会比现在更加复杂。
我正在阅读有关useReducer钩子的文章,然而很难完全理解其背后的整个思想,也不确定它是否真的能帮助我解决这个问题。 如果我继续以这种方式工作,我感觉自己注定要失败,但我没有看到任何更好的实现选项。
onClick
中的note
参数。你能否只设置一个值来代替这 5 个单独状态呢?然后在需要时稍后检索嵌套属性(例如note.data.category
)。 - CertainPerformance