Я не могу обновить массив на MongoDB с помощью React и Redux

Question

Это супер просто, но я застреваю. Мне нужно обновить массив на MongoDB с помощью fetch PUT. Я протестировал его с почтальоном и работает отлично, но мое приложение 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:

export const updateColors = colors => async dispatch => {
  try {
    setLoading();


    const res = await fetch(`/api/settings/${colors.id} `, {
      method: "PUT",
      body: JSON.stringify(colors),
      headers: {
        "Content-Type": "application/json"
      }
    });


    const data = await res.json();


    dispatch({
      type: UPDATE_COLORS,
      payload: data
    });
} catch ...

Редуктор 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

Есть идеи о моих ошибках?

спасибо!

Answer 1

Звучит странно, но теперь работает, я не знаю, что я сделал, но теперь обновляет