我如何增加反应助力？

Question

引言

你好，我正试图为我的在线商店构建一个计数器组件，但是我很难让它正常工作。

问题

根据我的理解，count值不会增加，因为它保留在同一个实例中，并且在刚刚重新呈现的父组件中该值从未更改过。声明变量并试图在addOne()方法中本地增量也会导致值不发生更改。

问题

有什么是我不理解的例子和他们如何运作，谁能给我一些建议吗？

class ParentComponentClass extends React.Component {
  render() {
    const test = "Is anything printing?";
    let count = 0;
    return (
      <div>
        <QuantityCounter_CheckoutButton count={count} />
        <Test test={test} />
      </div>
    );
  }
}

class QuantityCounter_CheckoutButton extends React.Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
  }
  addOne() {
    let qtyCount = this.props.count;
    qtyCount++;
    console.log(qtyCount);

  }

  render() {
    return (
      <div>
        <a href="#" id="bazuka_add" onClick={this.addOne}>
          <i className="material-icons ">add_circle_outline</i>
        </a>
        <a href="#" id="bazuka_remove" onClick={this.minusOne}>
          <i className="material-icons ">remove_circle_outline</i>
        </a>
        <p>qty:</p>
      </div>
    );
  }
}

Answer 1

因此，我知道您已经将其标记为“答案”，但我想向you.This解释这个概念，这是一个简单但非常重要的概念。

想象一下两个函数

function manipulateCounter(count){
    count++
    console.log(count)
}

function counterContainer(){
    let countVariable = 0;
    manipulateCounter(countVariable);
    manipulateCounter(countVariable);
    manipulateCounter(countVariable);
    console.log(count);
}

我有一个调用增量器的容器。现在我的目标是增加“可数变量”。但是我这样做了，我的递增逻辑被打破了。这是因为通过函数传递' value‘，我只是传递一个值的副本，而不是操纵变量本身的方法。(如果你传递一个对象，这是一个完全不同的故事，但这值得一个单独的博客文章)

道具也是这样！您只是在递增发送给您的值的副本。而且，由于“呈现(){}”意味着它是一个称为纯函数的东西，所以它的function会变得更复杂一些。对于你来说，这意味着每次在反应中发生变化，渲染中的内容就会被销毁并从头开始运行。这意味着您不能在“render”中维护一个计数器变量。

所以我们有两个问题。

1. 找到正确维护组件中“状态”的方法
2. 找到一种更新此状态的方法。

这就是React组件状态派上用场的地方！

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state ={
             count : 0;
        }
    }


    render (){
       <Child count={this.state.count}/>
    }
}

因此，现在我们找到了一种安全的方法来维护我们的反应组件中的“状态计数”。接下来，我们需要一种方法来更新它。这意味着，由于状态在父组件中，因此子节点需要对父组件进行一些向上的通信。

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state ={
             count : 0;
        }
    }

    increment(){
        this.setState({ counts : this.state.count + 1});
    }   

    render (){
       return(<Child count={this.state.count} increment={this.increment.bind(this)}/>);
    }
}

这是一个非常强大的react概念，允许构建可重用的组件。孩子不知道父变量是如何管理变量的。它只被传递给计数的当前值，以及它应该调用的函数，以防值需要增加。

所以在我的孩子身上我只需要这样做..。

class Child extends React.Component{
    render (){
       <div>
           <div>{this.props.count}</div>
           <button onClick={this.props.increment} >Increment</button>
       </div> 
    }
}

你只需要修改这个学习到你的应用程序。祝好运!

Answer 2

您不能这样更改react Prop。您需要的可能是State

螺旋桨只从父组件传递到子组件，如果要更改一个支柱，它应该发生在父组件中。

在这里检查状态和道具之间的区别：https://reactjs.org/docs/faq-state.html

Answer 3

我同意“在这里检查国家和道具的区别：https://reactjs.org/docs/faq-state.html”。但是，您还应该重新排列组件，以便状态和setState将位于一个组件中，因为如果不使用Redux，状态是本地的。我建议阅读这篇文章，https://medium.freecodecamp.org/get-pro-with-react-setstate-in-10-minutes-d38251d1c781

顺便说一句，如果您使用Redux，您可以离开您的布局和设置状态通过还原器。现在您可以在使用mapStateToProps更改状态时更新您的道具。