React实践项目–todolist（2）创建工具类文件

小半 • 2022年11月21日下午12:59 • React • 阅读 183

模拟获取数据接口

export function getTodoListData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const listData = [
        {
          name: "默认事项",
          isChecked: false,
          isDelete: false,
        },
      ];

      resolve(listData);
    }, 1000);
  });
}

创建 Context

创建 Context 用来存储 todo_list 所有列表项

import React from "react";
export const TodoListContext = React.createContext([])

Http 组件

在这个组件中，我们使用 TodoListContext.Provider 来将通过 getTodoListData 获取的模拟接口数据，转发给消费者组件，当没有获取参数的时候，我们使用通过 props 传入的 Loading 组件来渲染当前区域。

import React from "react";
import { getTodoListData } from "./getData";
import { TodoListContext } from "./context";

export const Http = {
  Get: class extends React.Component {
    state = {
      data: [],
      component: this.props.loading || "Loading",
    };
    async componentDidMount() {
      const { url } = this.props;
      const res = await getTodoListData(url);

      this.setState({
        data: res,
        component: this.props.children,
      });
    }
    render() {
      return (
        <TodoListContext.Provider value={this.state.data}>
          {this.state.component}
        </TodoListContext.Provider>
      );
    }
  },
};