如何進一步改進此代碼以遵循標準？

在函數addCard中，爲什麼我需要調用setState？如果我不打電話setState卡沒有添加。
我已經讀過，突變狀態不好反應。所以應該使用像immutable.js這樣的庫。我想要知道這段代碼是否遵循React的標準實踐（無需深入研究redux）。

  import React, {Component} from 'react'; 
      import ReactDom from 'react-dom'; 



      class App extends React.Component{ 
       constructor(){ 
        super(); 
        this.state = { 
         name: '', 
         desc:'', 
         data : [ 
           { 
            name: 'Batman', 
            desc:'I\'m Batman' 
           }, 
           { 
            name: 'Superman', 
            desc: 'Up up and away' 
           }, 
           { 
            name: 'Spiderman', 
            desc: 'Your friendly neighbour' 
           } 
          ] 
         } 

         this.updateStateName =this.updateStateName.bind(this); 
         this.updateStateDesc =this.updateStateDesc.bind(this); 
         this.addCard =this.addCard.bind(this); 

        } 
        updateStateName(e) { 
         this.setState({name: e.target.value}); 
        } 

        updateStateDesc(e) { 
         this.setState({desc: e.target.value}); 
        } 

        addCard(){ 
         this.state.data.push({ 
          name: this.state.name, 
          desc: this.state.desc 
         }) 
         let cards = this.state.data; 

         this.setState({ 
          data: cards,name: '',desc: ''}); 

        } 

        render(){ 
         return(
          <div> 
          <h3>Simple Form</h3> 
          <Form name={this.state.name} 
          desc={this.state.desc} 
          updateStatePropName={this.updateStateName} 
          updateStatePropDesc={this.updateStateDesc} 
          addCard={this.addCard}/> 
          <hr/> 
          <Content_Card data={this.state.data}/> 
          </div> 
         ); 
        } 
      } 

      class Form extends React.Component{ 
       constructor(props){ 
        super(props); 

       } 




       render(){ 
       return(
        <div> 
         <input type="text" placeholder="Enter Title" value={this.props.name} onChange={this.props.updateStatePropName}/> 
         <br/> 
         <input type="text" placeholder="Enter Desc" value={this.props.desc} onChange={this.props.updateStatePropDesc} className="desc-box"/> 
         <br/> 
         <button type="button" onClick={() => this.props.addCard()}> Add New Card </button> 
        </div> 
       ); 
       } 
      } 

      const Content_Card = (props) => { 

       return(
        <div> 
        <Card listData = {props.data}/> 
        </div> 
       ) 
      } 

      const Card = (props) =>{ 
       const card = props.listData.map((item) => { 
       return <li className="content-card" key={item.name}> 
       <h4>{item.name}</h4> 
       <div>{item.desc}</div> 
       </li> 
       }); 
       return(
        <div> 
        <ul>{card}</ul> 
        </div> 
       ) 
      } 


      ReactDom.render(<App/>, document.getElementById('app'))

來源

2017-05-04 Etherealm

1）在功能addCard，爲什麼我需要調用的setState？如果我不打電話setState卡沒有添加。

從文檔setState()：

入列更改組件狀態並告訴陣營，這個組件和它的孩子們需要被重新渲染與更新的狀態」

向卡片陣列添加項目不會告訴React組件需要重新渲染。

2）我已經讀過，變異的狀態不好反應。所以應該使用像immutable.js這樣的庫。我想要知道這段代碼是否遵循React的標準實踐（無需深入研究redux）。

由於setState性質，變異this.state並不好，因爲把你的代碼，例如：

this.state.data.push({name: this.state.name, desc: this.state.desc})

push修改data直接以規避作出反應的狀態管理和調用setState可能最終取代您剛在data上做出的變異。

可以使用concat而不是使用push直接改變數據，而不是修改原始數據，而是使用concat。你的代碼最終會看起來像：

addCard(){ 
    this.setState({ 
    data: this.state.data.contact({ 
     name: this.state.name, desc: this.state.desc 
    }), 
    name: '', 
    desc: '' 
    }); 
}

爲引用傳遞時複製你必須意識到，對於更復雜的對象，使得淺拷貝仍然不夠。

來源

2017-05-04 22:25:31

如何進一步改進此代碼以遵循標準？

回答

相關問題