從孩子更改父母的 state，但孩子的道具不更新

Question

class IQTestItem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      ItemNumber: 1
    }
    this.nextItem = this.nextItem.bind(this)
  }

  nextItem() {
    let nextItem = this.state.ItemNumber + 1
    this.setState({
      itemNumber: nextItem
    })
  }

  render() {
    return (
      <div>
        <img src={'IQTestImages/item ' + this.state.ItemNumber + '/' +this.state.ItemNumber + '.svg'} alt={'item ' + (this.state.ItemNumber)}  />
        <ItemOptions 
          itemNumber={this.state.ItemNumber}
          nextItem={this.nextItem}
        />
      </div>
    )
  }
}

class ItemOptions extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let itemNumber = this.props.itemNumber
    return(
      <div>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.1.svg`} alt={`Option 1`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.2.svg`} alt={`Option 2`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.3.svg`} alt={`Option 3`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.4.svg`} alt={`Option 4`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.5.svg`} alt={`Option 5`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.6.svg`} alt={`Option 6`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.7.svg`} alt={`Option 7`} onClick={this.props.nextItem}/>
        <input type="image" src={`IQTestImages/item ${itemNumber}/${itemNumber}.8.svg`} alt={`Option 8`} onClick={this.props.nextItem}/>
      </div>
    )
  }
}

我的問題是，如果我手動更改 IQTestItem 的 state 中的 ItemNumber，我的圖像都會完全改變。 當我嘗試使用子組件 ItemOptions 更改它時，它會更改父級（IQTestItem）的 state，但子級從未通過道具收到父級的更新 state。 我正在使用 onClick={this.props.nextItem} 執行此操作。 有人知道我做錯了什么嗎？

抱歉，我對反應還很陌生。

Answer 1

您在nextItem()中有錯字。 Js 區分大小寫，因此您應該使用 ItemNumber: nextItem 而不是itemNumber: nextItem ItemNumber: nextItem

題外話 - 如果您不熟悉反應，則不應從課程開始。 類將很快被棄用。 Atm 學習 React 最簡單的方法是功能組件 + 鈎子https://reactjs.org/docs/hooks-intro.html