小编Nic*_*one的帖子

反应jsx：

<button ariaLabel='label'>click</button>

呈现的html：

<button arialabel="label">click</button>

控制台警告：

index.js:1 Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`?

嗯，不，我的意思是 ariaLabel，因为我们总是在 jsx 中使用驼峰命名法。为什么渲染的 html 中全部是小写？

我正在尝试更新 useState setter 范围内的内容。这正如我在以下 codepen 示例中所期望的那样：

更新状态变量之外的值

但正如我的应用程序中所实现的那样，insideCallCount每次toggleCell调用都会被调用两次。相关部分见下文：

  const callCount = useRef(0);
  const insideCallCount = useRef(0);
  const toggleCell = (i) => {
    callCount.current += 1;
    setPattern((pattern) => {
      let newPattern = deepCopyPattern(pattern);
      newPattern[i][selectedSound].on = !newPattern[i][selectedSound].on;
      insideCallCount.current += 1;
      return newPattern;
    });
    console.log('callCount: ', callCount.current);
    console.log('insideCallCount: ', insideCallCount.current);
  };

我多次“切换”按钮后，控制台读数如下所示：

callCount:  1
insideCallCount:  0
callCount:  2
insideCallCount:  2
callCount:  3
insideCallCount:  4
callCount:  4
insideCallCount:  6
callCount:  5
insideCallCount:  8
callCount:  6
insideCallCount:  10

我的理解这与它包含在函数定义中这一事实有关。我尝试将整个内容包装在 useCallback 中，并使用值在依赖项数组中进行监视，但这没有帮助。我缺少什么？

我的商店是这样的：

export default configureStore({
  reducer: {
    sequencer: sequencerReducer,
    editMode: editModeReducer,
    tone: toneReducer,
    app: appReducer,
  },
  middleware: (getDefaultMiddleware) => {
    getDefaultMiddleware({ immutableCheck: false });
  },
});

我有一个工作thunk，但我需要这个immutableCheck: false配置。一旦设置，它似乎会覆盖默认的中间件，并且 thunk 不再工作。这是我的想法：

export const modCell = (step, noteOn) => (dispatch, getState) => {
  const selectedSound = getState().editMode.selectedSound;
  dispatch(sequencerSlice.actions.toggleCell({ step, selectedSound }));
};

这是我得到的错误：

Error: Actions must be plain objects. Use custom middleware for async actions.

有任何想法吗？