Reactjs 语义UI仅在可见性更改时对侧栏渲染推送器作出反应（重复/重新匹配）

我使用的是react和semantic。我在用电脑。其思想是，左侧边栏提供一些菜单选项，然后右侧边栏是根据左侧菜单中的哪个选项选择的子菜单。选择子菜单项时，组件将添加到

侧边栏.Pusher

，即显示在页面上。 除了重新呈现

侧边栏.Pusher的内容外，它都可以正常工作。这显然只会在左侧栏的可见性更改时更新。我正在使用redux/rematch来处理状态，并且可以看到保存
侧栏.Pusher的内容的状态正在更新，但是只有当侧栏的可见性更改时才会调用'render（）

侧边栏Pusher的内容是一个数组，我甚至尝试在页面上显示数组的长度，每次单击右侧侧边栏上的项目时，数组的长度都会被更新（推入）。但是，这不会导致触发render（），而是在左侧边栏可见性发生变化时触发

只是要注意的是，我确实看到了，但是它是去年的，答案不足以让我解决这个问题。我们将不胜感激

结构：

Index.js
呈现
App.js
，
App.js
呈现
Menu.js
（这是一组语义）。其中一个菜单选项是
Sidebar.js
，它呈现：

    <Sidebar.Pushable as={Segment}>
      <Sidebar
        as={Menu}
        animation="overlay"
        direction="right"
        inverted
        vertical
        visible={secondaryVisibility}
        width="wide"
      >
        {focusedList.map((el, i) => {
          return (
            <Menu.Item key={i} as="a" onClick={() => this.addSegment(el)}>
              <Article el={el} />
            </Menu.Item>
          )
        })}
      </Sidebar>
      <Sidebar
        as={Menu}
        animation="overlay"
        icon="labeled"
        inverted
        // onHide={this.handleSidebarHide}
        vertical
        visible={primaryVisibility}
        width="wide"
      >
        <Menu.Item
          onClick={() => this.changeTab(menuItem)}
          as="a"
          name="menuItem"
          header
        >
          Menu Item
        </Menu.Item>

      </Sidebar>
      <Sidebar.Pusher style={{ minHeight: "600px" }}>
        <Segment basic>
          {segments.map((el, i) => {
            console.log(`el ${el}`)
            return <Content key={i} segment={el} />
          })}
        </Segment>
      </Sidebar.Pusher>


{focusedList.map（（el，i）=>{
返回(
此.addSegment（el）}>
)
})}
this.changeTab（menuItem）}
as=“a”
name=“menuItem”
标题
>
菜单项
{segments.map（（el，i）=>{
log（`el${el}`）
回来
})}

所有状态（
secondaryVisibility
etc）都存储在重新匹配中

谢谢
我无法根据您发布的代码识别问题，您能否提供更多信息，例如整个
侧边栏.js
以及
内容
组件中的内容？。我的猜测是，有一种特殊的或生命周期的方法在妨碍我们

我创建了一个简单的示例，如果我理解您试图实现的目标，它似乎工作得很好：
我明白了。我忘记了状态的不变性。也许有人会从中受益

我试图用

  let tmp = prevState.contract.segments
  tmp.push(segment)
  this.update({ segments: tmp })

但是，这不起作用，因为tmp是对
prevState.contract.segments
的引用，所以这不起作用，因为推到
tmp
相当于推到
prevState.contract.segments

您必须拥有一个全新的阵列：

  const tmp = [...prevState.contract.segments, segment]
  this.update({ segments: tmp })

现在它可以工作了。
有趣的是，在手机上，所以还不能粘贴代码，但我看到的主要区别是您将可见性存储在Content.js中以及侧边栏组件中。我把这个储存在我的复赛商店里。所以，是的，您已经理解，当用户选择右侧的操作时，我希望计数器递增，而您的操作是正确的。我将可见性状态移动到了商店中，但实际上我可能不需要在其他地方访问它，因此我将首先尝试将其恢复到组件中。不过，最好能理解为什么会出现这种情况。否则谢谢你！