如何使用钩子“提升”反应组件中的 setState 函数？

Question

我有一个需要同步的共享状态组件。

一个状态设置当前的音阶类型，它应该支持所有可能的音阶，但我从小调和大调开始。第二个状态根据所选的音阶类型为所选音符名称设置正确的音符。我大部分时间都在工作，但我需要更好地同步状态，以便一个人可以对另一个人做出反应。

react 社区中的一些人建议“提升状态”，我正试图弄清楚如何正确地做到这一点，尤其是使用钩子。

所以，我已经能够弄清楚如何将设置在组件上的音阶音符的状态提升到一些充满数组的对象中，但现在我需要弄清楚如何提升 @下面代码中的987654321@函数，有12个这样的音符名称组件，每一个都为notes状态设置不同的音阶：

<NoteInput
  id="c"
  scale={scale}
  type="radio"
  name="notes"
  label="c"
  value="c"
  onClick={
    () => setNotes(
      scale === 'minor' ? scalePatterns['c-minor'] :
      scale === 'major' ? scalePatterns['c-major'] :
      ''
    )
  }
/>
<NoteLabel
  whileHover={{ scale: 1 }}
  whileTap={{ scale: 0.9 }}
  scale={scale}
  htmlFor="c"
>
  {
    scale === 'major' ? 'C' :
    scale === 'minor' ? 'C' :
    'C'
  }
</NoteLabel>

所以现在我需要弄清楚如何将 onClick 道具中的箭头函数“提升”到它自己的函数中，但我不知道如何去做，因为要求是我需要传递不同的状态到函数的每个实例，但保持该状态与另一个状态同步，这是设置音符按钮然后反应的比例类型。

更新：

经过仔细检查，我认为状态功能如下：

Scale Type
  |     \
  |      \ 
  |    Root Note
  |      /
  |     /
Scale Notes

...其中音阶类型将影响选择的根音（例如 C# 或 Db）以及音阶本身的音符。那么音阶音符还需要结合音阶类型知道根音。

Answer 1

根据我从您的问题中了解到的情况，您的状态具有以下依赖项-

Root Note       Scale
        \       /
         \     /
          Notes

notes 状态变量仅在root note name (c/d/e etc) 或scale (major/minor etc) 发生更改时更改。您可以将所有与比例相关的状态抽象到一个上下文中，并在相应的组件中使用它，如下所示。您可以使用useEffect 钩子的第二个参数来监听状态变量的变化并执行side-effects。

ScalesContext.js

...

const SCALE_PATTERNS = {
  "c-major": ["c", "d", "e", "f", "g", "a", "b"],
  "c-minor": ["c", "d", "eflat", "f", "g", "aflat", "bflat"]
};

const ScalesContext = createContext(null);

export const ScalesContextProvider = ({ children }) => {
  const [rootNote, setRootNote] = useState(""); // 'c'
  const [scale, setScale] = useState(""); // 'major'
  const [notes, setNotes] = useState([]); // ['c', 'd', ...]

  // On scale/rootNote state change -> update notes
  useEffect(() => {
    const key = `${rootNote}-${scale}`;
    setNotes(SCALE_PATTERNS[key]);
  }, [scale, rootNote]);

  return (
    <ScalesContext.Provider
      value={{ rootNote, scale, notes, setScale, setRootNote }}
    >
      {children}
    </ScalesContext.Provider>
  );
};

export const useScalesContext = () => useContext(ScalesContext);

App.js

...

export default function App() {
  return (
    <div className="App">
      // Hook up Provider around ScaleSelect component
      <ScalesContextProvider>
        <ScaleSelect />
      </ScalesContextProvider>
    </div>
  );
}

ScaleSelect.js

...

export const ScaleSelect = () => {
  const state = useScalesContext();
  const { rootNote, scale, notes, setScale, setRootNote } = state;

  return (
    <div>
      <p>Root Note: {rootNote}</p>
      <p>Scale: {scale}</p>
      <input
        type="text"
        value={rootNote}
        placeholder="Root Note (try 'c')"
        onChange={e => setRootNote(e.target.value)}
      />
      <input
        type="text"
        placeholder="Scale (try 'major')"
        value={scale}
        onChange={e => setScale(e.target.value)}
      />
      <p>Notes: {JSON.stringify(notes)}</p>
    </div>
  );
};

我在这里有一个工作示例 - https://codesandbox.io/s/scales-notes-d8o18?fontsize=14&hidenavigation=1&theme=dark