Reactjs 从另一个类方法调用React setState不会'；t更新集

我试图理解为什么我无法在下面的示例中更新状态。调用

removeFromOrder

直接按预期工作，但只要我从

debutordercount

调用它，状态就不会更新

有人能帮我理解这一点吗

我在codepen上重现了这个问题

类顺序扩展React.Component{
renderOrder=（键）=>{
const item=this.props.items[key]；
const count=this.props.order[key]；
返回(

{count}个{item.name}
this.props.debutorderCount（key）}>&减号；
this.props.removeFromOrder（key）}>×；

)
}
render（）{
const orderIds=Object.keys（this.props.order）；
返回(
{orderIds.map（this.renderroder）}
);
}
}
类应用程序扩展了React.Component{
状态={
商品：{item1:{name:'chocolate'，价格：100}，item2:{name:'bread'，价格：50}，
顺序：{item1:3，item2:2}
};
removeFromOrder=key=>{
console.log（'从订单中删除'+键）；
//1.复印一份州政府文件
常量顺序={…this.state.order}；
//2.从订单中删除项目
删除订单[键]；
console.log（订单）
//3.调用setState更新状态对象
this.setState（{order}）；
};
deductOrderCount=（键）=>{
//1.复印一份州政府文件
常量顺序={…this.state.order}；
//2.从计数中扣除1，当其达到0时，从订单中删除
顺序[键]=（顺序[键]>1）？（顺序[键]-1）：0；
if（order[key]==0）此.removeFromOrder（key）//删除order[key]
//3.调用setState更新状态对象
this.setState（{order}）
}
render（）{
返回(
);
}
}
render（，document.getElementById（“main”））；

如果缺少else，则调用

deductOrderCount

，将更新状态中顺序的两倍 试试这样的

deductOrderCount = (key) => {
    // 1. take a copy of state
    const order = { ...this.state.order };
    // 2. deduct 1 from the count and when it hits 0 remove from the order
    order[key] = (order[key] > 1) ? (order[key] - 1) : 0;
    if (order[key] === 0) this.removeFromOrder(key) //delete order[key]
    else this.setState({ order }) // 3. call setState to update our state object

  }

---

我认为您不需要在deductOrderCount（）函数中调用removeFromOrder（）函数，因为它将两次更新状态，而两次更新将给出不同的状态，这是因为您应该在调用它后将此函数返回。removeFromOrder（）函数，使其不再设置状态

而不是：

if（order[key]==0）这个。removeFromOrder（key）//删除order[key]

配合：

---

if（order[key]==0）返回此值。removeFromOrder（key）//删除order[key]

谢谢您的回答，事实上我已经更新了两次状态。我只是通过在

deductOrderCount

中添加一个

setTimeout（（）=>{this.setState（{order}}），3000）来查看它。当调用
removeFromOrder
时，我看到该项被从状态中删除，然后再次出现

class Order extends React.Component {
  renderOrder = (key) => {
    const item = this.props.items[key];
    const count = this.props.order[key];
    return (
      <li key={key}>
        {count} pieces of {item.name}
        <button onClick={() => this.props.deductOrderCount(key)}>&minus;</button>
        <button onClick={() => this.props.removeFromOrder(key)}>&times;</button>
      </li>
    )
  }
  render() {
    const orderIds = Object.keys(this.props.order);
    return (
      <div>
        {orderIds.map(this.renderOrder)}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: { item1: { name: 'chocolate', price: 100}, item2: { name: 'bread', price: 50}},
    order: { item1: 3, item2: 2 }
  };

  removeFromOrder = key => {
    // 1. take a copy of state
    const order = { ...this.state.order };
    // 2. remove item from order
    delete order[key];
    // 3. call setState to update our state object
    this.setState({ order });
  };

  deductOrderCount = (key) => {
    // 1. take a copy of state
    const order = { ...this.state.order };
    // 2. deduct 1 from the count and when it hits 0 remove from the order
    order[key] = (order[key] > 1) ? (order[key] - 1) : 0;
    if (order[key] === 0) this.removeFromOrder(key); //delete order[key]
    // 3. call setState to update our state object
    setTimeout(() => {this.setState({ order })}, 3000)
  }

  render() {
    return (
      <div>
        <Order
          order={this.state.order}
          items={this.state.items} 
          removeFromOrder={this.removeFromOrder}  
          deductOrderCount={this.deductOrderCount}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("main"));

类顺序扩展React.Component{
renderOrder=（键）=>{
const item=this.props.items[key]；
const count=this.props.order[key]；
返回(

{count}个{item.name}
this.props.debutorderCount（key）}>&减号；
this.props.removeFromOrder（key）}>×；

)
}
render（）{
const orderIds=Object.keys（this.props.order）；
返回(
{orderIds.map（this.renderroder）}
);
}
}
类应用程序扩展了React.Component{
状态={
商品：{item1:{name:'chocolate'，价格：100}，item2:{name:'bread'，价格：50}，
顺序：{item1:3，item2:2}
};
removeFromOrder=key=>{
//1.复印一份州政府文件
常量顺序={…this.state.order}；
//2.从订单中删除项目
删除订单[键]；
//3.调用setState更新状态对象
this.setState（{order}）；
};
deductOrderCount=（键）=>{
//1.复印一份州政府文件
常量顺序={…this.state.order}；
//2.从计数中扣除1，当其达到0时，从订单中删除
顺序[键]=（顺序[键]>1）？（顺序[键]-1）：0；
if（order[key]==0）此.removeFromOrder（key）；//删除order[key]
//3.调用setState更新状态对象
setTimeout（（）=>{this.setState（{order}}），3000）
}
render（）{
返回(
);
}
}
render（，document.getElementById（“main”））；
On
order[key]==0
更新状态两次，一次从
removeFromOrder
更新，然后用
this.setState（{order}）覆盖它
class Order extends React.Component {
  renderOrder = (key) => {
    const item = this.props.items[key];
    const count = this.props.order[key];
    return (
      <li key={key}>
        {count} pieces of {item.name}
        <button onClick={() => this.props.deductOrderCount(key)}>&minus;</button>
        <button onClick={() => this.props.removeFromOrder(key)}>&times;</button>
      </li>
    )
  }
  render() {
    const orderIds = Object.keys(this.props.order);
    return (
      <div>
        {orderIds.map(this.renderOrder)}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: { item1: { name: 'chocolate', price: 100}, item2: { name: 'bread', price: 50}},
    order: { item1: 3, item2: 2 }
  };

  removeFromOrder = key => {
    // 1. take a copy of state
    const order = { ...this.state.order };
    // 2. remove item from order
    delete order[key];
    // 3. call setState to update our state object
    this.setState({ order });
  };

  deductOrderCount = (key) => {
    // 1. take a copy of state
    const order = { ...this.state.order };
    // 2. deduct 1 from the count and when it hits 0 remove from the order
    order[key] = (order[key] > 1) ? (order[key] - 1) : 0;
    if (order[key] === 0) this.removeFromOrder(key); //delete order[key]
    // 3. call setState to update our state object
    setTimeout(() => {this.setState({ order })}, 3000)
  }

  render() {
    return (
      <div>
        <Order
          order={this.state.order}
          items={this.state.items} 
          removeFromOrder={this.removeFromOrder}  
          deductOrderCount={this.deductOrderCount}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("main"));