React 列表添加數據

讓列表數據化

現在的列表還是寫死的兩個

標籤，那要變成動態顯示的，就需要把這個列表先進行數據化，然後再用javascript代碼，循環在頁面上。

我們先給上節課的list數組增加兩個數組元素，代碼如下：

    constructor(props){ //// 構造函數
        // 調用父類方法，繼承
        super(props) 
        this.state = {
            inputValue:"", //value的數據
            list:["基礎按摩","推背"]   //類表數據
        }
    }

有了數據後，可以在JSX部分進行循環輸出，代碼如下：

    render(){
        return(
            // 最外層只能有一個div ,如果使用flex佈局不需要div包括，可以使用Fragment包括
            <Fragment>
                <div> 
                    {/* 這裏可以使用js代碼 使用{}括起來 onChange事件*/}
                    <input value={this.state.inputValue} onChange={this.inputChange}/>  
                    <button>增加服務</button></div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                        return <li>{item}</li>
                        })
                    }
                </ul>
            </Fragment>
        )
    }

完成上面的步驟，數據就不再是固定的了，而是動態管理的，也爲我們接下來的添加打下了基礎，剩下的步驟也顯得很簡單了。

增加服務選項

要增加服務選項，我們需要再增加按鈕上先綁定一個方法this.addList(這個方法目前還沒有，需要我們接下來建立).

  <button onClick={this.buttonOnClick}>增加服務</button></div>

接下來就是把this.buttonOnClick方法，代碼如下：

    buttonOnClick=()=>{
        // 正加列表的數據
        this.setState({
            // 擴展運算符
            list:[...this.state.list,this.state.inputValue],
            inputValue:""  //正加後input框的值爲空

        })
    }

這裏需要說的市…這個是ES6的新語法，叫做擴展運算符。意思就是把list數組進行了分解，形成了新的數組，然後再進行組合。這種寫法更簡單和直觀，所以推薦這種寫法。

寫完上面的代碼，應該就可以實現增加項目了，你可以試着增加一下自己喜歡的服務進去，比如"中藥泡腳"…

解決key值錯誤

高興的同時其實是有一些隱患的，打開瀏覽器的控制檯F12,可以清楚的看到報錯了。這個錯誤的大概意思就是缺少key值。就是在用map循環時，需要設置一個不同的值，這個時React的要求。我們可以暫時用index+item的形式來實現。

  return <li key={index+item}>{item}</li>

技術胖第一博客網站：https://jspang.com/detailed?id=46#toc220