Question

我正在尝试获取状态为data= null的数据，然后在响应200 i执行setData(response.fetch.data)时在useEffect内进行获取，

但是当我调用获取数据的结果以将其呈现在<div> {data} </div>上时，它始终为null，因为从API获取数据需要花费时间，因此如果该数据等于，我应该创建条件为null，<div> loading.... </div>否则为<div> got it </div>。

现在，我尝试dispatch({type: Fetch, payload: data})插入上下文值挂钩，如果该state.context.value不等于null，<div> loading.... </div>否则<div> got it </div>这是错误并且重新加载窗口并检查我在Context错误中的所有值（未定义，并且为null），为什么会这样？

import ListTask from "../components/listTask.js";
import runAPI from "../API.js/runAPI.js";
import Swal from "sweetalert2";
import { TaskContext } from "../contexts/taskContext.js";

const Task = () => {
  const { state, dispatch } = useContext(TaskContext);
  const [task, setTask] = useState(null);

  useEffect(() => {
    let didCancel = false;
    runAPI
      .get("api/task/tasks")
      .then(data => {
        if (!didCancel) {
          setTask(data.data.data);
          dispatch({ type: "FETCH_DATA", payload: data.data.data }); // got error if this not commented
        }
      })
      .catch(error => {
        Swal.fire({
          title: "Error!",
          text: error.response.error,
          timer: 2000,
          type: "error",
          showCancelButton: false,
          showConfirmButton: false
        });
      });

    return () => (didCancel = true);
     // look https://github.com/facebook/react/issues/14326 why i use didCancel

  }, []);

  return <div> {!task ? <div> loading...</div> : <div> got.it</div>}</div>;
};

export default Task;

无论如何，我在上述情况下也使用了async-await，仍然是同样的问题

在使用中获取异步数据在安装组件出现错误后做出反应

0 个答案: