Reactjs 我能'；t使用React和Redux更新MongoDB上的数组

我的想法非常简单，但我被卡住了。 我需要用fetch-PUT更新MongoDB上的一个数组 我用postman进行了测试，效果很好，但我的应用React+Redux不起作用

import React, { Fragment, useEffect, useState } from "react";
import PropTypes from "prop-types";

import "materialize-css/dist/css/materialize.min.css";
import M from "materialize-css/dist/js/materialize.min.js";
import config from "react-global-configuration";

import Preloader from "../layout/Preloader";

import { connect } from "react-redux";

import { getColors, updateColors } from "../../redux/actions/settingsActions";

const Settings = ({
  setting: { settings, loading },
  getColors,
  updateColors
}) => {
  const [HighPColor, setHighPColor] = useState("");
  const [NormalPColor, setNormalPColor] = useState("");
  const [LowPColor, setLowPColor] = useState("");

  useEffect(() => {
    M.AutoInit();
    getColors();
    //eslint-disable-next-line
  }, []);

  const onSubmit = () => {

    const updColors = {
      id: settings[0]._id,
      colors: [
        {
          _id: colorsArray.colors[0]._id,
          HighPColor,
          NormalPColor,
          LowPColor
        }
      ]
    };

    updateColors(updColors);

    M.toast({ html: "Settings updated" });
  };

  if (loading || settings === null) {
    return <Preloader />;
  }


  const colorsArray = settings[0];

  return (
    <Fragment>
      <div id="color-settings" className="container">
        <div className="">
          <h4>Set Priorities Colors </h4>
          <div className="row">
            <div>High Priority</div>
            <div className="input-field">
              <input
                type="text"
                name="highPColor"
                defaultValue={colorsArray.colors[0].HighPColor}
                onChange={e => setHighPColor(e.target.value)}
              />
            </div>
          </div>
          <div className="row">
            <div>Normal Priority</div>

            <div className="input-field">
              <input
                type="text"
                name="normalPColor"
                defaultValue={colorsArray.colors[0].NormalPColor}
                onChange={e => setNormalPColor(e.target.value)}
              />
            </div>
          </div>

          <div className="row">
            <div>Low Priority</div>

            <div className="input-field">
              <input
                type="text"
                name="lowPColor"
                defaultValue={colorsArray.colors[0].LowPColor}
                onChange={e => setLowPColor(e.target.value)}
              />
            </div>
          </div>
        </div>
        <div className="">
          <a
            href="#!"
            onClick={onSubmit}
            className="modal-close waves-effect blue btn"
          >
            Enter
          </a>
        </div>
      </div>
    </Fragment>
  );
};

Settings.propTypes = {
  setting: PropTypes.object.isRequired,
  getColors: PropTypes.func.isRequired,
  updateColors: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  setting: state.settings
});

export default connect(mapStateToProps, { getColors, updateColors })(Settings);

Redux减速器：

case UPDATE_COLORS:
      return {
        ...state,
        settings: state.settings.map(setting =>
          setting._id === action.payload._id ? action.payload : setting
        ),
        loading: false
      };

它还给了我：

UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property `NormalPColor` of 'undefined' or 'null'.
[0]     at router.put (C:\Users\Marco\Desktop\React-Course\to-do-list\routes\settings.js:81:7)

尽管我对第81行进行了注释，但还是发生了这种情况

知道我的错误吗

---

谢谢

听起来很奇怪，但现在起作用了我不知道我做了什么，但现在更新了变量

NormalPColor

从哪里获得的？你能更新代码吗？你能把完整的组件发布在你写onSubmit函数的地方吗！我可以更新每一行代码，因为服务器是我的！谢谢

UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property `NormalPColor` of 'undefined' or 'null'.
[0]     at router.put (C:\Users\Marco\Desktop\React-Course\to-do-list\routes\settings.js:81:7)