使用 Redux 时出现错误消息 "undefined"？

Question

这是我第一次使用 redux，我试图将状态“apple”传递给另一个组件，但我得到的只是一条错误消息，提示“undefined is not an object(evaluating'_this.props.fruit') - 有人明白这里发生了什么吗？（我已经清理了这个例子的代码，所以可能更容易看出问题是什么，为什么它看起来有点空）谢谢！

App.js

    import { Provider } from 'react-redux'
    import {store} from './redux/app-redux'
const Stack = createStackNavigator()

export default function App() {
  return (
  
<Provider store={store}>
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="home" component={Home}/>
    </Stack.Navigator>
</NavigationContainer>
</Provider>
  );
}

app-redux.js

import {createStore, applyMiddleware} from 'redux'
import thunkMiddleware from 'redux-thunk'

const initialState = {
fruit: "apple"
}

const reducer= (state=initialState)=>{
return state
}

const store = createStore(reducer, applyMiddleware(thunkMiddleware))
export {store}

和Home.js

function mapStateToProps(state) {
    return{
        fruit: state.fruit
    }
}

const Home = () => {
    return(
    <View>
        <Text>{this.props.fruit}</Text>
    </View>
    )
}

export default connect(mapStateToProps)(Home)

Answer 1

在功能组件中你不需要 this 关键字来读取道具，实际上道具将作为函数参数传递。像这样更改您的 Home：

const Home = (props) => {
  return(
    <View>
      <Text>{props.fruit}</Text>
    </View>
   )
}

顺便说一句 react-redux 有一个 useSelector 方法（钩子）。对于功能组件，这是一种更简单的方法。参见：https://react-redux.js.org/api/hooks#useselector

使用 Redux 时出现错误消息 "undefined"？

error message "undefined" when using Redux?

reactjs

redux

expo