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，因此我希望它的长度是of5，所以我尝试了console.log('running now!')if-else语句，但它只运行一次。

我的app.js：

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

将调用editUserColumns，并且在editUserColumns上：

我的State.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控制台日志返回running only only，reducer也返回running only，但对于app.js console.log运行两次，这是我所期望的。

但是，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

为了更清楚地看到发生了什么，或者您可以将此条件放在reducer中

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} />
}

然后，它将正常工作，并仅在值更改时进行检查