Переключение между контролируемым режимом (с помощью `selectedIndex`) и неконтролируемым режимом не поддерживается в` Tabs` - PullRequest
Новая
       9

Переключение между контролируемым режимом (с помощью `selectedIndex`) и неконтролируемым режимом не поддерживается в` Tabs`

0 голосов
/ 28 мая 2019

Я пытаюсь реализовать некоторые вкладки с использованием реагирующих вкладок в моем следующем / реактивном приложении.

У меня есть главная страница project/:id, которая всегда открывается на вкладке индекса 0, и при выборе каждогоНа вкладке имя маршрута добавляется к маршруту, например: project/:id/one-tab.

Таким образом, если я делюсь ссылкой project/:id/two-tab, сайт открывается на вкладке 1 индекса.

Но я получаю сообщение об ошибке

react-dom.development.js:20312 Uncaught Error: Switching between controlled mode (by using selectedIndex ) and uncontrolled mode is not supported in Вкладки . at Function.copyPropsToState (Tabs.js:65) at getDerivedStateFromProps (Tabs.js:50)

Мой компонент выглядит так 

   class Project extends React.Component {

       constructor(props) {

          super(props);
          resetIdCounter();

       }

   state = {
     tabIndex: null
   };

   static async getInitialProps({ query }) {
      return { query };
   }

 render() {
    const { query } = this.props;
    const { tabIndex } = this.state;

    const TAB = {
      tab1: 0,
      tab2: 1,
    };

     return (

            <div>
              <Tabs
                selectedIndex={tabIndex || TAB[query.tab]}
                onSelect={index => this.setState({ tabIndex: index })}
              >
                <StyledTabList>
                  <StyledTab
                    onClick={() =>
                      Router.replaceRoute("one-tab", { id })
                    }
                  >
                    One tab
                  </StyledTab>
                  <StyledTab
                    onClick={() => Router.replaceRoute("two-tab", { id })}
                  >
                    Two tab
                  </StyledTab>    
                </StyledTabList>
              </Tabs>
            </div>
      );

   }
 }

 export default Project;
...