Question

使用 Redux 时出现“未定义”错误消息？

2021-12-23

44

reactjs redux expo

这是我第一次使用 redux，我试图将状态“apple”传递给另一个组件，但我收到的只是一条错误消息，提示“undefined 不是对象（正在评估'_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 关键字来读取 props，实际上 props 将作为函数参数传递。像这样更改您的 Home ：

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

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