setState in componentDidMount()

Question

以下代码会导致错误。使用参数更新组件状态的正确方法是什么？

constructor(props) {
super(props)
this.state = {
loading: true,
title: 'Meny',
id: null,
data: [],
currentMenuId: null,
error: null,
loadingMessage: 'Laddar innehåll...',
};
this.init();

}
init = () => {
const params = this.props.navigation.state.params
if(typeof(params) !== 'undefined') {
this.setState('title', params.title);
this.setState('id', params.id);
}
console.log(this.state);
}

错误

Invariant Violation: setState(...): takes an object of state variables to update or a function which returns an object of state variables.
This error is located at:
in Menu (at SceneView.js:10)
in SceneView (at StackViewLayout.js:488)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:539)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:434)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:433)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:60)
in RCTView (at View.js:60)
in View (at Transitioner.js:169)
in Transitioner (at StackView.js:22)
in StackView (at createNavigator.js:57)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:383)
in NavigationContainer (at SceneView.js:10)
in SceneView (at createTabNavigator.js:10)
in RCTView (at View.js:60)
in View (at ResourceSavingScene.js:14)
in RCTView (at View.js:60)
in View (at ResourceSavingScene.js:10)
in ResourceSavingScene (at createBottomTabNavigator.js:86)
in RCTView (at View.js:60)
in View (at createBottomTabNavigator.js:77)
in RCTView (at View.js:60)
in View (at createBottomTabNavigator.js:76)
in TabNavigationView (at createTabNavigator.js:127)
in NavigationView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:383)
in NavigationContainer (at App.js:40)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
Menu.Component.setState
react.development.js:241:102
Menu._this.init
Menu.js:41:8
new
Menu.js:32:7
<unknown>
createClassProxy.js:98:23
instantiate
createClassProxy.js:96:6
new
<unknown file>:0
constructClassInstance
ReactNativeRenderer-dev.js:6569:19
updateClassComponent
ReactNativeRenderer-dev.js:8733:8
beginWork
ReactNativeRenderer-dev.js:9580:15

Answer 1

嘿，因为我可以看到你的 setState 语法是错误的。

而不是这个

this.setState('title', params.title);
this.setState('id', params.id);

使用这个

this.setState({
title: params.title,
id: params.id
});

Answer 2

好的！我想通了。不需要我在这里设置状态，我可以使用getParam((，如下所示：

static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('title', ''),
headerStyle: Styles.header,
headerTintColor: Vars.colors.primary,
headerTitleStyle: Styles.headerTitle,
};
};