Reactjs Redux：更改存储中的值不会触发使用相同值的另一个组件

我也尝试过其他类似的建议，但都不管用，所以我现在提出我自己的问题。 所以我有一个使用redux的react js应用程序。我需要显示一个列下拉列表，使用它可以设置要显示或隐藏的表列。 我有一个header组件和一个list组件，它们都是兄弟。我试图在header组件中更改columnList的值，将update操作分派到update in store，并在此基础上尝试更改list组件中的列。 我目前的问题是，当我更改columnList的可见性时，我的list组件不会重新命名，也不会触发useEffect。 然而，更让我困惑的是，当在chrome中打开inspect时，一旦我在header组件中更改columnList值，移动分区以增加或减少inspect窗口，根据我的设置显示或隐藏列（这是唯一一次显示/隐藏列）

以下是列表组件，不相关部分和附加列列表值未包括在内

const columnList=useSelector(selectColumnList,shallowEqual);

var columns = [
    {
      id:1,
      title: "RPA ID",
      dataIndex: "",
      columnVisible:true,
      render: (record) => {
        let id = record.id.toString().padStart(3, "0");
        return `RPA${id}`;
      },
    },]

  useEffect(()=>{
    console.log("triggering dispatch")
    dispatch(updateOpportunityColumns(columns));
  },[])

const renderBody = (props, columns) => {
      return (
        <tr className={props.className}>
          {columns.map((item, idx) => {
            if (item.columnVisible) {
              return props.children[idx]
            }
          })}
        </tr>
      );
    }

    const renderHeader = (props, columns) => {
      return (
        <tr>
          {columns.map((item, idx) => {
            if (item.columnVisible)
              return props.children[idx];
          })}
        </tr>
      );
    }

  return (
    <div>
      <Table
        rowKey="uid"
        onRow={(record, rowIndex) => {
          return {
            onDoubleClick: () => {
              history.push({
                pathname: `${
                  RouteNames.Opportunity.path
                }/RPA${record.id.toString().padStart(3, "0")}`,
                opportunityId: record.id,
              });
            },
          };
        }}
        columns={columnList}
        dataSource={pagedData}
        pagination={{
          total: total,
          defaultPageSize: pageSize,
          current: currentPage,
          onChange: onPageChange,
        }}
        components={{
          header: {
            row: (props) => renderHeader(props, columnList),
          },
          body: {
            row: (props) => renderBody(props, columnList)
          },
        }}
      />
    </div>
  );
};

和操作文件

export const getOpportunityColumns = () => ({
  type: GET_COLUMNS_LIST
});

export const getOpportunityColumnsIntermediate = () => ({
  type: GET_COLUMNS_LIST_INTERMEDIATE
});

export const updateOpportunityColumns = (ColumnValue) => ({
  type: UPDATE_COLUMNS_LIST,
  payload: ColumnValue,
});

export const updateOpportunityColumnAtIndex = (index) => ({
  type: UPDATE_COLUMN_LIST_AT_INDEX,
  payload: index,
});

---

很抱歉，文件太大，包含其他要完全发布的内容。

您几乎已经发布了，但仍然在变异，您应该仔细阅读并尝试理解

以下是应该有效的代码：

case UPDATE_COLUMN_LIST_AT_INDEX: {
  //map state.ColumList to new array
  const newArray = state.ColumnList.map((item, index) =>
    index === action.payload
      ? //toggle columVisible if index is action payload
        { ...item, columnVisible: !item.columnVisible }
      : //return item unchanged, index is not action.payload
        item
  );
  return {
    ...state,
    ColumnList: newArray,
    ColumnListIntermediate: newArray,
  };
}

---

如果这不起作用，您应该检查渲染的内容我不知道Table组件是什么，但当道具更改时它可能不会重新渲染，因为它有一个错误的实现，我知道旧的react引导有一些问题。

非常感谢您的帮助，尽管从现在起我刚刚从列表组件中删除了“shallowEqual”，

const columnList=useSelector(selectColumnList,shallowEqual);

到

---

在标题中也是如此，之后效果很好。

如果在HandleDropDownCheckBox中更改状态，则不应更改状态。如果您建议使用const[mediateColumns，setmediateColumns]=useState（）作为另一个要变异的变量，那么使用“setmediateColumns”时，我将如何访问要更改的索引，我建议您使用索引分派操作，并在reducer中处理装箱新状态，这样它就不会像我添加到注释中的链接中建议的那样改变状态。@HMR，我已经按照您的要求做了，所以存储中的columnList再次被更新，但更改只反映在header组件中，仍然不在列表组件中。p、 我在这里也更新了代码。

case UPDATE_COLUMN_LIST_AT_INDEX: {
  //map state.ColumList to new array
  const newArray = state.ColumnList.map((item, index) =>
    index === action.payload
      ? //toggle columVisible if index is action payload
        { ...item, columnVisible: !item.columnVisible }
      : //return item unchanged, index is not action.payload
        item
  );
  return {
    ...state,
    ColumnList: newArray,
    ColumnListIntermediate: newArray,
  };
}

const columnList=useSelector(selectColumnList,shallowEqual);

const columnList=useSelector(selectColumnList);