不变违规：对象作为 React 子对象无效。检查`Content`的渲染方法

Question

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

  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.

Answer 1

变化：

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

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

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

props.tabItem.currentTab

4. Return 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'/>

不变违规：对象作为 React 子对象无效。检查`Content`的渲染方法

Invariant Violation: Objects are not valid as a React child. Check the render method of `Content`

reload

browser-refresh

reactjs

react-router

react-dom