P09:列表数据化、列表添加数据

Bertha 。 2023-10-06 20:45 18阅读 0赞

#### React16 基础 ####

*  阐述
 *  让列表数据化
 *  增加服务选项
 *  解决key值错误
 *  预览

## 阐述 ##

有了上节课的基础，这节课终于可以添加服务，为所欲为了，随意增加你想要的服务了。

这节课我们就来增加一个躺式采耳服务，体验一把帝王级待遇。

## 让列表数据化 ##

现在的列表还是写死的两个`<li>`标签，那要变成动态显示的，就需要把这个列表先进行数据化，然后再用 `javascript` 代码，循环在页面上。

我们先给上节课的 `list` 数组增加两个数组元素代码如下：

constructor(props){
        
        super(props) //调用父类的构造函数，固定写法
        this.state={
        
            inputValue:'willem' , // input中的值
            //----------主要 代码--------start
            list:['基础按摩','精油推背']   
            //----------主要 代码--------end
        }
    }

有了数据后，可以在JSX部分进行循环输出，代码如下：

render(){
        return  (
            <Fragment>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button> 增加服务 </button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return <li>{item}</li>
                        })
                    }
                </ul>  
            </Fragment>
        )
    }

完成上面的步骤，数据就不再是固定的了，而是动态管理的，也为我们接下来的添加打下了基础，剩下的步骤也显得很简单了。

## 增加服务选项 ##

要增加服务选项，我们需要再增加按钮上先绑定一个方法 `this.addList(这个方法目前还没有，需要我们接下来建立)`。

接下来就写 `this.addList` 方法，代码如下：

//增加服务的按钮响应方法
    addList(){
        
        this.setState({
        
            list:[...this.state.list,this.state.inputValue]
        })
    }

这里需要说的是`...`这个是ES6的新语法，叫做扩展运算符。  
意思就是把 `list` 数组进行了分解，形成了新的数组，然后再进行组合。这种写法更简单和直观，所以推荐这种写法。

写完上面的代码，应该就可以实现增加项目了，你可以试着增加一下自己喜欢的服务进去，比如”美女踩背”………

## 解决key值错误 ##

高兴的同时其实是有一些隐患的，打开浏览器的控制台F12,可以清楚的看到报错了。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
这个错误的大概意思就是缺少 `key` 值。就是在用 `map` 循环时，需要设置一个不同的值，这个时React的要求。

我们可以暂时用 `index+item`的形式来实现。

<ul>
        {
            this.state.list.map((item,index)=>{
                return <li key={index+item}>{item}</li>
            })
        }
    </ul>

这样就解决了这个隐患，现在就可以舒服的享受帝王级的服务了。

## 预览 ##

![在这里插入图片描述][0f664c78056c4b708cfb7bdf6d355817.gif_pic_center]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

Beauty.js 组件

import React,{
        Component,Fragment } from 'react'
    
    class Beauty extends Component{
        
        //js的构造函数，由于其他任何函数执行
        constructor(props){
        
            //调用父类的构造函数，固定写法
            super(props)
            this.state={
        
                inputValue:'' , // input中的值
                //----------主要 代码--------start
                list:['基础按摩','精油推背']   
                //----------主要 代码--------end
            }
        }
    
        render(){
        
            return  (
                <Fragment>
                    <div>
                        <input value={
        this.state.inputValue} onChange={
        this.inputChange.bind(this)} />
                        <button onClick={
        this.addList.bind(this)}> 增加服务 </button>
                    </div>
                    <ul>
                        {
        
                            this.state.list.map((item,index)=>{
        
                                return <li key={
        index}>{
        index} - {
        item}</li>
                            })
                        }
                    </ul>
                </Fragment>
            )
        }
    
        inputChange(e){
        
            // console.log(e.target.value);
            // this.state.inputValue=e.target.value;
            this.setState({
        
                inputValue:e.target.value
            })
        }
    
        //增加服务的按钮响应方法
        addList(){
        
            this.setState({
        
                list:[...this.state.list,this.state.inputValue]
            })
        }
    
    }
    
    export default Beauty

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e6293750e82e48a3a7cdacaf171a2707.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[0f664c78056c4b708cfb7bdf6d355817.gif_pic_center]: https://img-blog.csdnimg.cn/0f664c78056c4b708cfb7bdf6d355817.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/6e658097f25548db9c20f254f979eee5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/79ca8921605749f0a884ddf52bb34c23.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16