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登录该函数，那么我就有我的数组

看起来根本没有等待来自reducer的数据（在mongoDB上）

怎么做？

Answer 1

您没有什么可以让React做出反应（双关语）。在函数组件的顶部创建一个状态-const [settings, setSettings] = useState(<DEFAULT_VALUE>);，然后在.then()回调中将其设置为setSettings(settings)

您有一个作为setting.settings进入的道具，您正在检查它是否为null。那似乎不是您想要的。而是在我上面提到的状态下监听设置。

要使其正常工作，您必须将状态设置为其他名称，或者不破坏setting道具，以免名称冲突和混乱。

React-如何等待数据加载

1 个答案: