setState in componentDidMount()

Question

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

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,
         };
   };