尚硅谷React实战项目踩坑记录

持续更新！
本次实战项目素材来自尚硅谷的React全展现全栈，项目内容是使用react +antd的方式开发后台管理系统，本文在这里记录一下开发时踩到的小坑以及解决方案，希望能对你有帮助！
实战项目视频地址

配置部分：
yarn add less less-loader安装失败

登录页：
报错：TypeError: _form.default.create(…) is not a function

如果不想使用旧版antd，那么antd4的登录表单可以这么写

<div className="login">
        <header className="login-header">
          <img src={logo} alt="logo" />
          <h1>React项目：后台管理系统</h1>
        </header>
        <section className="login-content">
          <h2>用户登录</h2>
          <div>
            <Form
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              className="login-form">
              <Item
                name="username"
                rules={[
                  { required: true, whitespace: true, message: '请输入用户名' },
                  { min: 4, message: '用户名至少4位' },
                  { max: 12, message: '用户名至多12位' },
                  { pattern: !/^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' }
                ]}
              >
                <Input prefix={<UserOutlined style={{ color: "rgba(0,0,0,0.5)" }} />} />
              </Item>
              <Item
                name="password"
                rules={[
                  { validator: this.validatePwd }
                ]}
              >
                <Input.Password prefix={<LockOutlined style={{ color: "rgba(0,0,0,0.5)" }} />} />
              </Item>
              <Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                  登录
                </Button>
              </Item>
            </Form>
          </div>
        </section>
      </div>

导航栏部分：
1.报错：
Warning: Each child in a list should have a unique “key” prop.
Warning: React does not recognize the eventKey prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase eventkey instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Warning: React does not recognize the warnKey prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase warnkey instead. If you accidentally passed it from a parent component, remove it from the DOM element.

原因是我在使用map遍历生成菜单时，不小心把Menu组件也放到了递归函数，导致每次递归调用都生成了新的Menu，因此就算数组里有key也出现报错中说没有key的错误。

正确的菜单代码如下

getMenuNodes = (menuList) => {
    return menuList.map(item => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key} icon={<PieChartOutlined />}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        )
      } else {
        return (
          <SubMenu key={item.key} icon={<MailOutlined />} title={item.title}>
            {this.getMenuNodes(item.children)}
          </SubMenu>
        )
      }
    })
  }

<Menu
  mode="inline"
  theme="dark"
>
  {
    this.getMenuNodes(menuList)
  }
</Menu>

2.Icon的动态添加，正确用法如下：
解决方案

主页天气部分：
由于视频课内教的百度天气api不能使用了，因此改用高德地图的天气获取。
1.首先到高德地图注册账号。高德地图官网
2.注册成为开发者。
3.打开高德地图的天气qpi页面。高德天气

4.最后根据城市代码查询到当地天气。
5.https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=<用户key> // api样例

数据库中缺失数据问题：
在官方下载的文件中，mongodb的数据是缺失的，因此查不到category、product、role这部分的数据，因此需要我们手动添加。

1.下载mongoDBcompass。这个是MongoDB的官方可视化管理工具，相当于Navicat。
2.下载数据Json文件。百度网盘链接。提取码：07q3
3.启动数据库。
4.打开mongoCompass，点击Fill in connection fields individually

将localhost改为localhost/server_db2，点击连接。有时候会不成功，重启数据库，多试几次。
5.在这个数据库中添加categorys / products/ roles三个表
6.然后选择刚刚下载好的json文件将它导入进去。
7.重启一次数据库就能用上了。

关于Antd4.x Modal搭配Form使用
https://blog.csdn.net/Crayon111/article/details/119650608