Question

我正在学习反应。我在我的代码中面临以下问题：

在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'))

Answer 1

1）在addCard函数中，为什么需要调用setState？如果我没有调用setState，则不会添加该卡。

来自文档setState()：

将组件状态的更改排入队列，并告诉React需要使用更新的状态＆＃34;重新呈现此组件及其子组件。

向cards数组中添加项不会告诉React需要重新呈现该组件。

2）我读过，改变状态反应不好。所以应该使用诸如immutable.js之类的库。我想知道这个代码是否遵循React的标准实践（没有深入研究redux）。

由于setState的性质，变异this.state并不好，因为以您的代码为例：

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

push直接修改了data，绕过了React的状态管理，并且调用setState可能最终会替换您在data上所做的突变。

您可以使用push来创建数组的副本，而不是修改原始数据，而不是使用直接改变数据的concat。您的代码最终会如下所示：

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

您必须注意，对于更复杂的对象，在复制时传递引用仍然是不够的。

如何进一步改进此代码以遵循标准？

1 个答案: