Семантический пользовательский интерфейс React боковой панели рендеринга толкает только при изменении видимости (редукция / реванш)

Question

Я использую реагирование и семантику.Я использую пример с несколькими боковыми панелями .Идея состоит в том, что левая боковая панель предлагает некоторые пункты меню, а затем правая боковая панель - это подменю, основанное на том, какой вариант из левого меню выбран.Когда выбран элемент подменю, компонент добавляется в Sidebar.Pusher, т.е. отображается на странице.Все это работает, за исключением повторного рендеринга содержимого Sidebar.Pusher.Это, видимо, обновляется только при изменении видимости левой боковой панели.Я использую redux / rematch для обработки состояния и вижу, что состояние, содержащее содержимое Sidebar.Pusher, обновляется, но `render () вызывается только при изменении видимости боковой панели.

Содержимое Sidebar.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>

и все состояния (secondaryVisibility и т. Д.) Сохраняются в повторном матче

Спасибо

Answer 1

Я понял.Я забыл об неизменности в государстве.Возможно, кому-то это поможет.

Я пытался обновить массив состояний с помощью

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

Теперь это работает.

Answer 2

Мне не удалось определить проблему на основе опубликованного вами кода. Не могли бы вы предоставить больше информации, например, всего Sidebar.js и, возможно, что находится в компоненте Content ?.Я полагаю, что мешает HOC или метод жизненного цикла.

Я создал тривиальный пример, который, кажется, работает нормально, если я понимаю, что вы пытаетесь выполнить: https://codesandbox.io/s/myl6xpz9py