时间戳

首页 > 解决方案 > Concat 运行两次，但 if 语句只运行一次，控制台显示只运行一次

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

问题描述

我有一个 if else 语句，如果它是 userActionAdded 为假，那么将运行以下情况：

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

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

我的 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

标签： reactjs

解决方案

只需改变一点你的减速器

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

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

推荐阅读