从孩子更改父母的 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