必须返回有效的反应元素或 null。 react-redux 连接答案

【问题标题】：A valid react element or null must be returned. react-redux connect必须返回有效的反应元素或 null。 react-redux 连接
【发布时间】：2017-04-16 23:56:51
【问题描述】：

我有这个组件：

let Vepo = (props) => (
  <Container >
    <Header style={styles.header}>
      <Left>
        <Button transparent>
        </Button>
      </Left>
      <Body>
        <Title style={styles.title}>Search</Title>
      </Body>
      <Right>
      </Right>
    </Header>
    <Container style={styles.container}>
      <ScrollView >
        <Keywords />
        <Categories />
      </ScrollView>
    </Container>
  </Container>
)

Vepo = connect(
  null,
  null
)(Vepo)

export default Vepo

但是现在我需要实现ComponentDidMount 所以通过this example of using a higher order component：

    class Wrapper extends Component {
        componentDidMount() {
            this.props.getAllTehDatas();
        }

        render() {
            <WrappedComponent {..this.props} />
        }
    }

    const mapStateToProps = () => ({

    });

    const mapDispatchToProps = {
        getAllTehDatas
    };

export default connect(mapStateToProps, mapDispatchToProps)(Wrapper);

我应该可以做到：

let Vepo = (props) => (
  <Container >
    <Header style={styles.header}>
      <Left>
        <Button transparent>
        </Button>
      </Left>
      <Body>
        <Title style={styles.title}>Search</Title>
      </Body>
      <Right>
      </Right>
    </Header>
    <Container style={styles.container}>
      <ScrollView >
        <Keywords />
        <Categories />
      </ScrollView>
    </Container>
  </Container>
)

class Wrapper extends Component {
    componentDidMount() {
        console.log("loaded")
    }

    render() {
        <Vepo />
    }
}

Vepo = connect(
  null,
  null
)(Wrapper)

export default Vepo

但我收到此错误：

Wrapper.render()：必须返回有效的反应元素或 null。你可能返回了 undefined 和一些其他对象的数组。

我哪里出错了？

【问题讨论】：

请问，第二个 null 是干什么用的？我有一个连接（mapStateToProps，null --- 并且想知道这是否是从 mapDispatchToProps 取消订阅，为什么我想要那个

标签： javascript reactjs react-native react-redux

【解决方案1】：

这是关于 Wrapper 的渲染，你放弃了 return 。将渲染更改为：

render() {
    return <Vepo/>
}

【讨论】：