Concat 运行两次，但 if 语句只运行一次，控制台显示只运行一次

Question

我有一个 if else 语句，如果是 userActionAdded 为 false，那么会运行下面的情况：

  case ADD_USER_ACTION:
      console.log('running now!')
      return {
        ...state,
        userActionAdded: true,
        columns: state.columns.concat({title:'action1'}),
      };

但是，我发现我的列从 [4] 的长度变为 [6] 的长度，因此我希望它的长度为 [5]，我已经尝试过 console.log('running now!') if-else 语句，但它只运行一次。

我的 app.js：

{editUserColumns(userActionAdded)}
<Table columns={columns} dataSource={data}/>
{console.log(columns)}

editUserColumns 将被调用，并且在 editUserColumns 上：

我的状态.js

  const editUserColumns = (userActionAdded) => {
    if (userActionAdded) {
    } else {
      console.log("loaded");
      dispatch({
        type: ADD_USER_ACTION,
      });
    }
  };

还有我的减速器

    case ADD_USER_ACTION:
      console.log("running now!");
      return {
        ...state,
        userActionAdded: true,
        columns: state.columns.concat({title:'action1'}),
        
      };

State.js 控制台日志只返回运行一次，reducer 也只返回运行一次，但是对于 app.js 控制台日志运行两次，这是我的预期。

但是，app.js 控制台日志输出数组的输出长度是 6 而不是 5

Answer 1

只需改变一点你的减速器

case ADD_USER_ACTION:
  console.log('before we had: ', state.columns.length)
  const newState = {
    ...state,
    userActionAdded: true,
    columns: state.columns.concat({title:'action1'}),
  }
  console.log('now we have: ', newState.columns.length)
  return newDtate

更清楚地看到发生了什么，或者你可以把这个条件放在减速器里面

case ADD_USER_ACTION:
  return state.userActionAdded
    ? state
    :  {
      ...state,
      userActionAdded: true,
      columns: state.columns.concat({ title:'action1' }),
    }

更新：

是在 JSX 里面吗？

{editUserColumns(userActionAdded)}
<Table columns={columns} dataSource={data}/>
{console.log(columns)}

不，请不要那样做。将函数从 JSX 中分离出来，如果 App.js 是函数组件，那么这样写

const App = (props) => {
  const { userActionAdded } = props
  useEffect(() => editUserColumns(userActionAdded), [userActionAdded])

  console.log(columns)
  return <Table columns={columns} dataSource={data} />
}

然后它将正常工作并仅检查值是否更改