Question

我有这个组件：

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，以及其他一些对象的数组。

我哪里错了？

Answer 1

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

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

export default combineReducers({
    UserReducer
});

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

1 个答案: