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

时间:2017-04-16 23:56:52

标签: javascript reactjs react-native react-redux

我有这个组件:

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():必须返回有效的react元素或null。您   可能已经返回undefined,以及其他一些对象的数组。

我哪里错了?

1 个答案:

答案 0 :(得分:0)

关于 Wrapper 的渲染,你放弃了它的回报。将渲染更改为:

import { combineReducers } from 'redux';
import UserReducer from '../User/UserReducer'

export default combineReducers({
    UserReducer
});