有效沟通问答-【官方】百战程序员_IT在线教育培训机构

renderItem={(item)=>(
                        <List.Item actions={[
                            <a>查看</a>,
                            <a>编辑</a>,
                            <a>删除</a>,
                        ]}>
                            <List.Item.Meta
                            avatar={<Avatar src={item.mainPic} />}
                            title={item.name}
                            description={['图书','服装','电器','家具','数码','食品'][item.type]}
                            ></List.Item.Meta>
                            <Space>
                                {item.price?<span style={{color:"red"}}>{`￥${item.price}`}</span>:null}
                                <span>{JSON.parse(item.attrs).map(attr=>attr.key+":"+attr.value+";")}</span>
                            </Space>
                        </List.Item>
                    )}

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 21楼

老师我这里面没有数据

React高级实战项目-宜居.zip

WEB前端全系列/第十六阶段：React企业级项目/宜居(商城类)高级React实战项目 22楼

老师我这里面没有数据

WEB前端全系列/第十六阶段：React企业级项目/宜居(商城类)高级React实战项目 23楼

老师，这个antd组件4.21.4版本的地址在哪里加

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 24楼

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 25楼

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 26楼

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 27楼

老师为什么create store 不能使用会报错

后来我根据建议安装了 Redux Toolkit

但是还是不会使用 Redux Toolkit

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

Redux Toolkit is our recommended approach for writing Redux logic today, including store setup, reducers, data fetching, and more.

For more details, please read this Redux docs page: https://redux.js.org/introduction/why-rtk-is-redux-today

configureStore from Redux Toolkit is an improved version of createStore that simplifies setup and helps avoid common bugs.

You should not be using the redux core package by itself today, except for learning purposes. The createStore method from the core redux package will not be removed, but we encourage all users to migrate to using Redux Toolkit for all Redux code.

If you want to use createStore without this visual deprecation warning, use the legacy_createStore import instead:

import { legacy_createStore as createStore} from 'redux'

@不推荐使用

我们推荐使用 @reduxjs/toolkit 包的 configureStore 方法，它取代了 createStore。

Redux Toolkit 是我们推荐的当今编写 Redux 逻辑的方法，包括存储设置、reducers、数据获取等。

有关更多详细信息，请阅读此 Redux 文档页面：https://redux.js.org/introduction/why-rtk-is-redux-today

Redux Toolkit 中的 configureStore 是 createStore 的改进版本，它简化了设置并有助于避免常见错误。

你今天不应该单独使用 redux 核心包，除非是为了学习目的。核心 redux 包中的 createStore 方法不会被删除，但我们鼓励所有用户迁移到对所有 Redux 代码使用 Redux Toolkit。

如果您想在没有此视觉弃用警告的情况下使用 createStore，请改用 legacy_createStore 导入：

从“redux”导入 { legacy_createStore as createStore}

“createStore”已弃用。ts(6385)

index.d.ts(375, 4)：该声明曾在此处标注为已弃用。

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 28楼

const express = require("express")
const router = express.Router()
const sqlFn = require("../mysql")

router.post('/add',function(req,res,next){
    const sql = "incert into menu values (null,?,?,?,?,?,?)"
    const {pid =-1,name,linkUrl,openType,icon,isAdmin} = req.body;
    const arr = [pid,name,linkUrl,openType,icon,isAdmin]
    sqlFn(sql,arr,function(err,data){
        if(err){
            next(err)
            return
        }
        if(data.affectedRows){
            res.send({code:'00000',success:true})
        }
    })
})

module.exports = router

const express = require("express");
const app = express();
const menu = require("./routes/menu")
const bodyParser = require("body-parser")


app.use(bodyParser.json())
app.use("/api/menu",menu)


app.use(function(err,req,res,next){
    console.info(err.stack);
    res.status("500").send("服务端出错了")
})

app.listen("3030",function(){
    console.log("服务器运行在3030端口上");
})

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 29楼

为什么我点击换页这个下拉菜单就会自动闭合

import React, { Component } from 'react'
import { Modal, Form, Input, Select, Radio, Dropdown, Space,Pagination } from 'antd'
import { icons } from '../../../components'



export default class ModleForm extends Component {
    constructor(props){
        super(props);
        this.state={
            currentIcons:icons.slice(0,10)
        }
    }
    formRef = React.createRef();
    onCancel = () => {
        this.props.dispatch({
            type: "hideModleForm"
        })
    }

    onSave = (values) => {
        console.log(values);
    }
    layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
    }
    render() {
        return (
            <Modal visible width={600} title={this.props.title}
                onCancel={this.onCancel}
                onOk={() => this.formRef.current.submit()}
            >
                <Form {...this.layout} ref={this.formRef} onFinish={this.onSave}>
                    <Form.Item label="父菜单">
                        {"无"}
                    </Form.Item>
                    <Form.Item label="菜单名称" name="name" rules={[{ required: true }]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label="访问路径" name="linkUrl" rules={[{ required: true }]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label="打开方式" name="openType" rules={[{ required: true }]}>
                        <Select>
                            <Select.Option value="1">当前窗口</Select.Option>
                            <Select.Option value="2">新窗口</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="图标" name="icon" rules={[{ required: true }]}>
                        <Dropdown trigger={['click']}
                            overlayStyle={{background:"#fff",padding:10}}
                            overlay={
                                <>
                                    <Radio.Group>
                                        <Space direction='vertical'>
                                            {this.state.currentIcons.map((ele, index) => {
                                                return (<Radio value={ele.name} >
                                                    {React.createElement(ele.renderFn)}
                                                    <span style={{ margin: 5 }} key={index}>{ele.name}</span>
                                                </Radio>)
                                            })}
                                        </Space>
                                    </Radio.Group>
                                    <div style={{textAlign:"right",padding:10}}>
                                        <Pagination showSizeChanger={false} 
                                        size="small" 
                                        total={icons.length}
                                        onChange={(page,pageSize)=>{
                                            this.setState({
                                                currentIcons:icons.slice(pageSize*(page-1),pageSize*page)
                                            })
                                        }}
                                        ></Pagination>
                                    </div>
                                </>
                            }>
                            <Input></Input>
                        </Dropdown>
                    </Form.Item>
                    <Form.Item label="权限" name="isOfAdmin" rules={[{ required: true }]}>
                        <Radio.Group>
                            <Radio value="1">仅超管可见</Radio>
                            <Radio value="2">不限</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="菜单名称" name="name" rules={[{ required: true }]}>
                        <Input></Input>
                    </Form.Item>
                </Form>
            </Modal>
        )
    }
}

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 30楼

同学您好