React Native集成Redux报错：检查react-redux connect()的render方法

Hey there! Let's break down the issues in your code that are causing that Error: Check the render method with react-redux connect() message:

1. You're Using a Non-Existent React Native Component #

In your home.js file, you've used <Input type='text' />—but React Native doesn't have a built-in Input component. The correct input component is TextInput. This invalid component is causing a render failure, which React Redux is flagging as an issue with your connected component's render method.

Fix: #

Update your home.js to use TextInput instead:

// First, import TextInput instead of Input
import { View, Text, Button, TextInput } from 'react-native';

// Then replace your Input component:
<TextInput placeholder="Type something here" />

2. Your mapStateToProps is Accessing an Undefined Store Property #

Your mapStateToProps tries to grab store.clickState.newValue, but if your reducers aren't set up correctly, clickState might not exist in your store (or might be undefined). Accessing newValue on an undefined value will throw an error, which again gets surfaced as a connect-related render issue.

Fix: #

First, make sure your root reducer uses combineReducers to properly namespace your state:

// src/reducers/index.js
import { combineReducers } from 'redux';
import clickReducer from './clickReducer';

// This ensures your state has a `clickState` property
export const Reducers = combineReducers({
  clickState: clickReducer
});

Then, ensure your clickReducer returns a valid initial state (so newValue is never undefined):

// src/reducers/clickReducer.js
const initialState = {
  newValue: '' // Initialize with an empty string to avoid undefined
};

export default function clickReducer(state = initialState, action) {
  switch (action.type) {
    // Add your action handlers here later
    default:
      return state;
  }
}

3. Optional: Clean Up Your App Component Export #

Your src/app.js exports an arrow function that returns JSX directly. While this works, wrapping it in a named function component makes it more explicit and avoids any edge cases with React's rendering:

import React from 'react';
import { Provider } from 'react-redux';
import { Store } from './store';
import Home from './components/home';

export default function App() {
  return (
    <Provider store={Store}>
      <Home />
    </Provider>
  );
}

Start with fixing the TextInput issue first—it's the most straightforward cause. Then verify your reducer setup, and you should be able to resolve that connect-related error.

内容的提问来源于stack exchange，提问作者Magas