Question

我使用changeCheck功能检查和取消选中特定组件。

使用该功能时，它可以正常工作。

this.props.team是所有团队的列表。

changeAllTeams的目标是能够检查和取消选中具有特定联赛的所有球队。

在此示例中，我想更改所有具有NFL联赛缩写的球队：

 this.state = {
            checked: [],
            checkedTeams: [],
            teamObject: [],
            queryString: [],
            accordionStatus: [true, true, true]
        }

changeAllTeams = (leagueType) => {
        this.props.team.map(
            (v, i) => {
                if(v.league.acronym === 'NFL'){
                    this.changeCheck(i, v.team_name, v)
                } 
            }
        )
    }

    componentDidUpdate(){
        console.log('checked', this.state.checked)
        console.log('team object', this.state.teamObject)
        console.log('props team object', this.props.teamObject)
        this.props.changeLeagues(this.props.league, this.props.checkedLeagues, this.state.checkedTeams, this.state.queryString, this.state.teamObject, this.state.checked)
    }

    changeCheck = (index, name, teamObject) => {
        //updates checked team state
        if(!this.state.checkedTeams.includes(name)){
            this.state.checkedTeams[this.state.checkedTeams.length] = name
            this.setState({ checkedTeams: [...this.state.checkedTeams] })
            //sets team object with new team object
            this.state.teamObject[this.state.teamObject.length] = teamObject
            this.setState({ teamObject: this.state.teamObject })
        } else {
            console.log(name)
            newChecked  = this.state.checkedTeams.filter(v => { return v !== name})
            this.setState({ checkedTeams: newChecked })
            //removes team object and sets new state
            newObjectChecked = this.state.teamObject.filter(v => { return v.team_name !== teamObject.team_name})
            this.setState({ teamObject: newObjectChecked })

        }
        //updates checkbox for specific space
        this.state.checked[index] = !this.state.checked[index]
        this.setState({ checked: this.state.checked })

        this.forceUpdate()
    }

当我在changeAllTeams中映射数组时，只有数组中的最后一个对象才会生效。

已检查状态会更新所有内容，但checkedTeams和teamObject则不会。

该视频可能有助于进一步了解： https://streamable.com/q4mqc

编辑： 这是this.props.team中对象的结构：

Answer 1

我没有您的代码，但是我很确定问题是您没有为每个项目提供唯一的ID（请记住，在大多数情况下，对项目使用地图索引是个坏主意）。您应该做的就是为每个项目赋予唯一的键，并根据该ID调用函数。

Answer 2

在某些地方可以更改this.state的内容。这可能导致React无法检测到状态更改，因为新状态和旧状态都引用了同一对象。我建议您不要突变任何状态，而是在将新数据传递给setState（）之前创建数据对象的克隆

映射设置反应状态的功能

2 个答案: