0

一旦我刷新页面并通过从状态中获取相同的道具重新加载相同的道具，我就会收到上述错误。我无法找到为什么在重新加载页面时发生这种情况，在第一次加载页面加载正常。

  const Content = (props) => {
      if (props.tabItem.contentList !== undefined) {
        return (
          <div>
            {props.tabItem.contentList.map((tab) => {
              if (props.tabItem.currentTab === tab.tabId) {
                return (
                  <div key={props.tabItem.currentTab}>
                    {tab.content.props.children}
                  </div>
                );
              }
            })}
          </div>
        );
      }
      return (
        <div>no record</div>
      );
    };

My tabItem that saving in the state is like this:-

 tabList = [{
        tabId: '1',
        tabName: 'Test'
        isPrimary: true,
      },
      ];
      // create new contentList
      contentList = [
        {
          tabId: '1',
          content: <div> <Test1Container{...this.props} addTab={this.addTab} /></div>,
        },
      ];
      tabData = {
        tabList,
        currentTab: '1',
        contentList,
      };
this.props.addTabItem(tabData);
this.props.addTabItem is use to save the state.
4

1 回答 1

1

变化：

1.写一个else条件，如果if条件失败，那么在这种情况下组件不会返回任何东西。

2.我们不能使用if/elseinside jsx，所以使用三元运算符进行条件渲染。

3. currentTab存在于里面tabData，所以这样写来访问它的值：

props.tabItem.currentTab

4.null如果身体内部条件失败，则返回map。

用这个：

const Content = (props) => {
  if (props.tabItem.contentList !== undefined) {
    return (
      <div>
         {props.tabItem.contentList.map((tab) => {
            return props.tabItem.tabData.currentTab === tab.tabId ? 
                 <div key={props.tabItem.currentTab}>
                     {tab.content.props.children}
                  </div>
                  : null
         })}
      </div>
    )
  }else{
      return null
  }
}

检查此示例工作片段：

var a = <div><p>hello</p><p>world</p></div>

var App = (props) => {
    return <div>{props.a.props.children}</div>
}

ReactDOM.render(<App a={a}/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

于 2017-05-22T11:46:24.750 回答