Question

我试图理解为什么我无法在下面的示例中更新状态。直接调用myImage() { console.log('test') this.myValue = this.myObservables.status console.log(typeof(this.myValue)) if (!this.myValue || this.myValue==null) { console.log('undefined') this.ahuValue = 0 } else{ // do something }可以按预期方式工作，但是一旦我从removeFromOrder调用它，状态将不会更新。

有人可以帮助我理解这一点吗？

我已在Codepen here上重现了该问题

deductOrderCount

Answer 1

您错过了其他项目，然后致电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

  }

Answer 2

我认为您不需要在deductOrderCount（）函数内调用removeFromOrder（）函数，因为它将两次更新状态，因为两次更新将给出不同的状态

Answer 3

这是因为您应该在调用它之后再次将this.removeFromOrder（）函数返回给setState。

如此： if (order[key] === 0) this.removeFromOrder(key) //delete order[key]

继续： if (order[key] === 0) return this.removeFromOrder(key) //delete order[key]

Answer 4

感谢您的回答，的确，我两次更新了状态。我只是通过在setTimeout(() => {this.setState({ order })}, 3000)中添加一个deductOrderCount来看到它。然后我看到，一旦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 setState不会更新set

4 个答案: