如何在反应中合并传递道具和默认道具？

Question

In my simple create-react-app

I have this incoming prop

dummyConfig: {
    prop_1: {
      prop_1_1: "100",
      prop_1_2: "100"
    }
  }

in my app's default prop, I have

dummyConfig: {
    prop_1: {
      prop_1_1: "prop_1_1",
      prop_1_2: "prop_1_2"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    }
  }

I want to have a final prop in App.js to become following, so I can use it.

final

dummyConfig: {
    prop_1: {
      prop_1_1: "100",
      prop_1_2: "100"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    }
  }

github link

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const dummyConfig = {
  prop_1: {
    prop_1_1: "100",
    prop_1_2: "100"
  }
};

ReactDOM.render(
  <React.StrictMode>
    <App
      // sys
      systemConfig={{ systemConfig: "systemConfig" }}
      // app
      applicationConfig={{ applicationConfig: "applicationConfig" }}
      // dummy
      dummyConfig={dummyConfig}
    />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

App.js

import React from "react";
import PropTypes from "prop-types";

function App(props) {
  //test
  console.log("props", props);

  return <div className="App"></div>;
}

App.defaultProps = {
  systemConfig: {},
  applicationConfig: {},
  dummyConfig: {
    prop_1: {
      prop_1_1: "prop_1_1",
      prop_1_2: "prop_1_2"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    }
  }
};

App.propTypes = {
  systemConfig: PropTypes.object.isRequired,
  applicationConfig: PropTypes.object.isRequired
};

export default App;

When I do console.log I only see. Any way to achieve with using prop and default prop?

{
  "systemConfig": {
    "systemConfig": "systemConfig"
  },
  "applicationConfig": {
    "applicationConfig": "applicationConfig"
  },
  "dummyConfig": {
    "prop_1": {
      "prop_1_1": "100",
      "prop_1_2": "100"
    }
  }
}

Answer 1

Instead of giving App a default props field of dummyConfig , you can have a "default value" for dummyConfig as a variable inside of your function.

For example:

function App(props) {
  //test
  const dummyConfig = {
    prop_1: {
      prop_1_1: "prop_1_1",
      prop_1_2: "prop_1_2"
    },
    prop_2: {
      prop_2_1: "prop_2_1",
      prop_2_2: "prop_2_2"
    },
    ...props.dummyConfig
  }
  // dummyConfig will now be a merge with your props, and "default value"

  return <div className="App"></div>;
}

App.defaultProps = {
  systemConfig: {},
  applicationConfig: {},
  dummyConfig: {}
};

App.propTypes = {
  systemConfig: PropTypes.object.isRequired,
  applicationConfig: PropTypes.object.isRequired
};

If you want your state to change based on the props that are passed in, you could do something like:

const defaultDummyConfig = {
  prop_1: {
    prop_1_1: "prop_1_1",
    prop_1_2: "prop_1_2"
  },
  prop_2: {
    prop_2_1: "prop_2_1",
    prop_2_2: "prop_2_2"
  },
}

function App(props) {
  //test
  const [ dummyState, setDummyState ] = useState({
    ...defaultDummyConfig,
    ...props.dummyConfig
  });

  // update the new state if the prop ever changes
  // this way, dummyState will always contain what you want (if it's your desired effect)
  useEffect(() => {
    setDummyState({...defaultDummyConfig, props.dummyConfig})
  }, [props.dummyConfig])

  return <div className="App"></div>;
}