useReducer 逻辑负责处理表中的 dublican

如何解决useReducer 逻辑负责处理表中的 dublican

我正在学习使用 useReducer。我在react input中写了，点击按钮后，向表格中添加一个元素并显示在页面上，我还想添加一个逻辑，不允许向表格中添加两个具有相同内容的相同元素，但不幸的是它不起作用，请帮助。 console.log 可以工作，但无论如何都会向数组中添加一个项目

const tab = []
const App = () => {
  const [state,dispatch] = useReducer(
    (state,action) => {
      switch (action.type) {
        case 'ADD':
          for (const n of state) {
            if (n.name === action.course.name) {
              console.log('repeated text')
              return
            }
          }
          return [...state,action.course]
      }
    },tab)

解决方法

如果没有您的具体数据，很难对此进行测试，但这应该可行：

  const [state,dispatch] = useReducer(
    (state,action) => {
      switch (action.type) {
        case 'ADD':
          if(state.find(i => i.name === action.course.name))
            return state
          else
            return [...state,action.course]
      }
    },tab)