已定义后接口RES，现在接口暂时不可用，需要mock下项目。react要怎么做

Question

namespace RES {
    export interface List {
        lateId:    string;
        name:          string;
        cover:         string;}}
function Data(props: {item: RES.List}) {
    const navigate = useNavigate()
    return <li className={Style.li} key={props.item.lateId} onClick={() => navigate('/Detail', {
        state: {
           lateId: props.item.lateId
        }
    })}>
        <div className={Style.cover} style={{backgroundImage: `url(${props.item.cover})`}}></div>
        <div className={Style.name}>{props.item.name}</div>
    </li>
}

已定义后接口RES，现在接口暂时不可用，需要mock下项目。react要怎么做

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这篇博客: React 脚手架项目,使用mock数据,模拟后端数据中的 在项目根目录下创建mock文件夹 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  然后在项目根目录下创建mock文件夹,在这个文件夹里面,我们就可以编写mock数据
  
  通常我会把不同的api请求,放在不同的文件中,比如user相关的写在user.js中,login相关的写在login.js中
  书写格式如下:
  user.js

  module.exports = {
      // =====================
      // The default GET request.
      // https://github.com/jaywcjlove/mocker-api/pull/63
      '/api/user': {
          id: 1,
          username: 'kenny',
          sex: 6
      },
      
      'GET /api/user/list': [
          {
              id: 1,
              username: 'kenny',
              sex: 6
          }, {
              id: 2,
              username: 'kenny',
              sex: 6
          }
      ],
      
      
      'DELETE /api/user/:id': (req, res) =>
      {
          console.log('---->', req.body)
          console.log('---->', req.params.id)
          res.send({ status: 'ok', message: '删除成功！' });
      }
  }
  

  login.js

  module.exports = {
      'POST /api/login/account': (req, res) =>
      {
          const { password, username } = req.body;
          if (password === '888888' && username === 'admin')
          {
              return res.json({
                  status: 'ok',
                  code: 0,
                  token: "sdfsdfsdfdsf",
                  data: {
                      id: 1,
                      username: 'kenny',
                      sex: 6
                  }
              });
          } else
          {
              return res.status(403).json({
                  status: 'error',
                  code: 403
              });
          }
      },
  }
  

  文件导出一个对象,key值是’POST /api/login/account’这样的格式,前面是 请求方式+空格+path,GET方法可以省略掉请求方式
  value值可以直接是一个json 也可以是一个回调函数(req,res)=>{},写法和express的写法一致

  注意,一般不在index.js中具体的接口,index.js是聚合导出所有的接口

• 以下回答来自chatgpt:

  在React中实现模拟数据的功能可以通过以下步骤进行：

  1. 创建一个mock数据文件，命名为mockData.js。该文件用于存储模拟的数据。例如：

  export const mockData = [
    { id: 1, name: 'John Doe', age: 25 },
    { id: 2, name: 'Jane Smith', age: 30 },
    { id: 3, name: 'Tommy Lee', age: 35 },
  ];
  

  1. 在需要使用模拟数据的组件中，导入mock数据文件。例如在PersonInfo组件中导入mockData.js：

  import { mockData } from './mockData';
  

  1. 在组件的state中定义一个数据源变量，用于存储数据。例如在PersonInfo组件的state中添加data属性：

  state = {
    data: [],
  };
  

  1. 在组件的生命周期方法中，通过setState方法将模拟数据赋值给数据源变量。例如在componentDidMount方法中：

  componentDidMount() {
    this.setState({ data: mockData });
  }
  

  1. 在组件的render方法中，使用数据源变量来渲染数据。例如在PersonInfo组件的render方法中使用map函数遍历data数组：

  render() {
    const { data } = this.state;
    return (
      <div>
        {data.map(item => (
          <div key={item.id}>
            <p>Name: {item.name}</p>
            <p>Age: {item.age}</p>
          </div>
        ))}
      </div>
    );
  }
  

  这样就可以在React项目中使用模拟数据进行测试。当接口不可用时，数据源变量会使用mockData中的数据来渲染组件。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^