React - 如何根据道具更改多个初始状态

Question

I am a newbie to React. I came up with a question about my code. I cannot initialize the state based on the props. For example, I can get the jsonData(in NCMenuItems class) value, but when I try to initialize other states like groups, showpin, direction, isCollapsible based on the jsonData value, React always gives me an error saying that these states are null.

Also, I find another problem, the console.log in render() in NCMenuItems class always print twice, why is that? Thank you so much.

Here is my code:

NCMenuItems class

import React, {Component} from 'react';
import NCMenuItem from '../MenuComponent/NCMenuItem';

class NCMenuItems extends Component {
state = {
    jsonData: this.props.jSONObj,
    showpin: false,
    direction: false,
    isCollapsible: false,
    cssFilePath: '',
    groups: null
};

static getDerivedStateFromProps(props, state){
    return {
        showpin: this.state.jsonData.showpin === '1'? true:false,
        direction: this.state.jsonData.direction === '1'? true:false,
        isCollapsible: this.state.jsonData.isCollapsible === '1'? true:false,
        cssFilePath: this.state.jsonData.cssFilePath,
        groups: this.state.jsonData.groups
    }
}


render() {
    console.log('From NCMenuItems this.props.jSONObj',this.props.jSONObj);
    console.log('From NCMenuItems this.state.jsonData',this.state.jsonData);
    console.log('From NCMenuItems this.state.groups',this.state.groups);
    console.log('From NCMenuItems this.state.jsonData.groups',this.state.jsonData.groups);
    return (
    <div>
        <ul id="nc-menu-ul" showpin direction isCollapsible cssFilePath={this.state.isCollapsible}>
            {/* <NCMenuItem groups={this.state.groups}/> */}
        </ul>
    </div>
    );
}
}

export default NCMenuItems;

In App.js

import React, { Component } from 'react';
import NCMenuItems from './MenuComponent/NCMenuItems';

class App extends Component {
constructor(props) {
super(props);
this.state = {
  deserializedJSONObj: {
    nc_menu_parameters: {
      showPin: 1,
      direction: 1,
      isCollapsible: 1,
      cssFilePath: ""
    },
    nc_menu_groups: [
      {
        label: "Project",
        nc_menu_entries: [
          { entryLabel: "Overview", entryLink: "/Details", isClickable: 1 },
          { entryLabel: "Comments", entryLink: "/Comments", isClickable: 1 },
          { entryLabel: "Activity", entryLink: "/Activity", isClickable: 1 },
          { entryLabel: "Multiplier", entryLink: "/Multiplier", isClickable: 1 }
        ]
      },
      {
        label: "Heaters",
        nc_menu_entries: [
          {
            entryLabel: "In design",
            entryLink: "/InDesignParts",
            isClickable: 1
          },
          { entryLabel: "Parts", entryLink: "/InDesignParts", isClickable: 1 },
          {
            entryLabel: "Pricing",
            entryLink: "/InDesignPricing",
            isClickable: 1
          },
          {
            entryLabel: "Documents",
            entryLink: "/InDesignDocument",
            isClickable: 1
          }
        ]
      }
    ]
  }
};
}


 render() {
console.log('FROM App.js', this.state.deserializedJSONObj);
return (
  <div>
    <NCMenuItems jSONObj={this.state.deserializedJSONObj} />{/* pass the JSON object as props to NCMenuItems*/}
    <h1>Test the nc_menu!</h1>
  </div>
);
}
}

export default App;

Answer 1

The render is triggered twice because the first render happens on mount, the second re-render happens when getDerivedStateFromProps is called - which sets state again and triggers a rerender.

Regarding your question, you need to look at props.jsonData , not state.jsonData . This is because the state set operation is async, and the state has not yet been updated when the method is called.

You don't need both those methods, you can compute your state in the constructor. Destructure the JSONObj from props, and create the state with the calculations you're already doing in getDerivedStateFromProps - with a small change. You need to look at the values of the JSONObj from props , not state .

class NCMenuItems extends Component {
  constructor(props) {
    super(props);
    const {JSONObj} = props;
    this.state = {
     jsonData: JSONObj,
     showPin: JSONObj.showPin === '1',
     direction: JSONObj.direction === '1',
     isCollapsible: JSONObj.isCollapsible === '1',
     cssFilePath: JSONObj.cssFilePath,
     groups: JSONObj.groups

...etc
  }
}

Compute all the data based on the props that you receive, then set those values in state.

You also don't need the ? true: false ? true: false , because the condition is implicitly true or false.

This:

showpin: this.state.jsonData.showpin === '1'? true:false,

is equal to:

showpin: this.state.jsonData.showpin === '1'