React组件state传递异常：LeagueSelect与TeamSelect状态同步问题

我帮你找到了问题的核心——你在直接修改React组件的state数组，而非遵循不可变更新的原则，这导致React无法检测到状态变化，进而让TeamSelect组件无法同步更新。

问题根源 #

在LeagueSelect组件里，你多处直接修改了原始的state数组：

• setModalVisible中直接调用this.state.checked.push(true)和this.state.checkedLeagues.push(v.acronym)
• changeCheck中添加联赛时直接赋值this.state.checkedLeagues[this.state.checkedLeagues.length] = acronym

React依赖状态的浅比较来判断是否需要重新渲染组件。如果直接修改原数组，数组的引用不会改变，React会误以为状态没有变化，因此不会触发组件重新渲染，TeamSelect接收的checkedLeaguesprops自然也不会更新，出现再次勾选时状态不同步的问题。

修复方案 #

所有状态更新都要创建新数组，避免修改原state：

1. 修复setModalVisible方法

setModalVisible(visible) {
  this.setState({modalVisible: visible})
  if(this.state.checked.length === 0) {
    // 创建新数组，而非直接修改原state
    const newChecked = this.props.league.map(() => true)
    const newCheckedLeagues = this.props.league.map(v => v.acronym)
    this.setState({ 
      checked: newChecked,
      checkedLeagues: newCheckedLeagues
    })
  }
  this.setState({ checkMessage: '' })
}

2. 修复changeCheck方法的状态更新逻辑

changeCheck = (index, acronym) => {
  // 省略其他逻辑...

  if(acronym === this.state.checkedLeagues[0] && firstString.length === 0) {
    this.setState({ checkMessage: `Don't you want something to look at?` })
  } else {
    // 不可变方式更新checkedLeagues
    if(!this.state.checkedLeagues.includes(acronym)){
      this.setState({ 
        checkedLeagues: [...this.state.checkedLeagues, acronym]
      })
    } else {
      const newCheckedLeagues = this.state.checkedLeagues.filter(v => v !== acronym)
      this.setState({checkedLeagues: newCheckedLeagues})
    }

    // 不可变方式更新checked数组
    const newChecked = [...this.state.checked]
    newChecked[index] = !newChecked[index]
    this.setState({ checked: newChecked })

    // 省略API调用逻辑...
  }
}

效果说明 #

通过上述修改，每次状态更新都会生成新的数组，React能准确检测到状态变化并触发LeagueSelect重新渲染，TeamSelect接收的checkedLeaguesprops也会同步更新，此时复选框就能正确跟随联赛选中状态变化了。

内容的提问来源于stack exchange，提问作者schoenbl