Реагировать - как ждать загрузки данных

Question

Я использую Redux и хочу дождаться загрузки данных параметра, чтобы получить цвета, чтобы создать переменную для массива. Но он не ждет данных и продолжает давать мне неопределенное значение

import { connect } from "react-redux";
import { deleteTask, setCurrent } from "../../redux/actions/taskActions";
import { getColors } from "../../redux/actions/settingsActions";

import M from "materialize-css/dist/js/materialize.min.js";

const TaskItem = ({
  setting: { settings, loading },
  task,
  deleteTask,
  setCurrent,
  getColors
}) => {
  useEffect(() => {
    const processDataAsycn = async () => {
      let settings = await getColors();
      return settings;
    };
    processDataAsycn()
      .then(settings => {
        console.log("resolved " + settings);
      })
      .catch(error => {
        console.log("rejected " + error);
      });

    // eslint-disable-next-line
  }, []);

  if (loading === true || settings === null) {
    return null;
  } else {
    const onDelete = () => {
      deleteTask(task._id);
      M.toast({ html: "Task deleted" });
    };

    const Notification = color => {
      const priority = task.priority;
      if (priority === "high") {
        return (color = "yellow-text");
      }
      if (priority === "normal") {
        return (color = "yellow-text");
      }
      if (priority === "low") {
        return (color = "yellow-text");
      }
      return color;
    };



    return (
      <li
        className="collection-item card-panel"
        style={{ marginBottom: "30px" }}
      >
        <div>
          <a
            href="#edit-task-modal"
            className={`modal-trigger ${Notification()}`}
            onClick={() => setCurrent(task)}
          >
            {task.task}
          </a>
          <span className="grey-text">
            <br />
            <span className="black-text">
              <Moment format="Do MMMM  YYYY, HH:mm:ss ">{task.date}</Moment>
            </span>
          </span>
          <br />
          <span className="purple-text text-purple">{task.user}</span>
          <a href="#!" className="secondary-content" onClick={onDelete}>
            <i className="material-icons grey-text">delete</i>
          </a>
        </div>
      </li>
    );
  }
};

TaskItem.propTypes = {
  setting: PropTypes.object.isRequired,
  task: PropTypes.object.isRequired,
  deleteTask: PropTypes.func.isRequired,
  setCurrent: PropTypes.func.isRequired
};

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

export default connect(mapStateToProps, { deleteTask, setCurrent, getColors })(
  TaskItem
);

, но я всегда получаю неопределенное значение

Если я запишу в функции console.log, то у меня будет мой массив

Похоже, совсем не ждет данных, поступающих от редуктора (на mongoDB)

как это сделать?

Answer 1

Вам не на что реагировать, чтобы реагировать (каламбур). В верхней части вашего функционального компонента создайте состояние - const [settings, setSettings] = useState(<DEFAULT_VALUE>);, а затем установите его в обратном вызове .then(), например setSettings(settings)

. У вас в качестве значения setting.settings и вы проверяете, это null. Кажется, это не то, что вы хотите. Вместо этого прислушайтесь к настройкам в состоянии, которое я упомянул выше.

Для того, чтобы это работало, вы должны будете установить состояние с другим именем или не разрушать структуру setting, чтобы избежать имени cla sh и спутанность сознания.