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 状态中的 ItemNumber，我的图像都会完全改变。当我尝试使用子组件 ItemOptions 更改它时，它会更改父项 (IQTestItem) 的状态，但子项从未通过道具接收到父项的更新状态。我正在使用 onClick={this.props.nextItem} 这样做。有人知道我做错了什么吗？

抱歉，我刚反应过来。

Answer 1

您在 nextItem() 中有一个拼写错误。 Js 区分大小写，所以你应该做 itemNumber: nextItem

而不是 ItemNumber: nextItem

Offtopic - 如果你是新手，你不应该从课程开始。类将很快被弃用。 Atm 学习 React 的最简单方法是函数式组件 + 钩子 https://reactjs.org/docs/hooks-intro.html

从孩子改变父母的状态，但孩子的道具不更新

1 个答案: