javascript - 无法获取组件的复选框以根据另一个组件的状态进行渲染

Question

在我的组件中确实更新了，我 console.log this.state.checkedTeams 和 this.state.checked。这些值是通过 componentDidUpdate 中的映射确定的。他们读的是他们应该读的内容。

但是，当我在渲染器中控制台记录值时，我得到空数组。

当我尝试在 componentDidUpdate 中设置状态时，超出了最大深度并抛出错误。

其目标是能够根据外部组件的状态调整 this.state.checked。

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { connect } from 'react-redux'
import { loadTeams, loadLeagues } from '../actions'
import Check from './CheckBox'

class TeamSelect extends Component {
    constructor(props) {
        super(props)
        this.state = {
            checked: [],
            checkedTeams: [],
            setOnce: 0
        }
    }

    componentDidUpdate() {

        this.state.checked.length = 0

            this.props.team.map(
                (v, i) => {
                    if(this.props.checkedLeagues.includes(v.league.acronym)){
                        this.state.checked.push(true)
                        this.state.checkedTeams.push(v.team_name)
                    } else{
                        this.state.checked.push(false)
                    }
                }
            )

        console.log('checkedTeams', this.state.checkedTeams)
        console.log('checked', this.state.checked)
    }

    // componentDidUpdate(){
    //     if(this.state.checked.length === 0) {
    //         this.props.team.map(
    //             (v, i) => {
    //                 if(this.props.checkedLeagues.includes(v.league.acronym)){
    //                     this.state.checked.push(true)
    //                     this.state.checkedTeams.push(v.team_name)
    //                 } else{
    //                     this.state.checked.push(false)
    //                 }
    //             }
    //         )
    //     }


    //     console.log('checked league', this.props.checkedLeagues)
    // }

    changeCheck = (index, name) => {

        firstString = []

        if(!this.state.checkedTeams.includes(name)) {
            firstString.push(name)
        } else {
            firstString.filter(v => { return v !== name})
        }

        this.state.checkedTeams.map(
            (v, i) => {
                if(v !== name) {
                    firstString.push(v)
                }
            }
        )


        if(name === this.state.checkedTeams[0] && firstString.length === 0) {
            this.setState({ checkMessage: `Don't you want something to look at?` })
        } else {
            if(!this.state.checkedTeams.includes(name)){
                this.state.checkedTeams.push(name)
            } else {
                this.setState({checkedTeams: this.state.checkedTeams.filter(v => { return v !== name})})
            }
            this.state.checked[index] = !this.state.checked[index]
            this.setState({ checked: this.state.checked })

            // queryString = []

            // firstString.map(
            //     (v, i) => {
            //         if (queryString.length < 1) {
            //             queryString.push(`?league=${v}`)
            //         } else if (queryString.length >= 1 ) {
            //             queryString.push(`&league=${v}`)
            //         }
            //     }
            // )
            // axios.get(`http://localhost:4000/reports${queryString.join('')}`)
            //         .then(response => {
            //             this.props.loadCards(response.data)
            //         })
        }
                // console.log('first string', firstString)
                // console.log('in function', this.state.checkedTeams)
    }

    render() {console.log('in render - checkedTeams', this.state.checkedTeams)
    console.log('in render - checked', this.state.checked)

        return(
          <View>
              { 
                  this.props.team === null ?'' : this.props.team.map(
                      (v, i) => {
                         return(
                            <View key={i}>
                                <Check
                                    checked={this.state.checked[i]}
                                    index={i}
                                    value={v.team_name}
                                    changeCheck={this.changeCheck}
                                />

                               { v.team_name === undefined ? null :
                                <Text>{v.team_name}</Text>}
                            </View>

                            )
                      }
                  )
             }
          </View>
        )
    }
}

function mapStateToProps(state) {
    return {
      team: state.team.team,
      checkedLeagues: state.league.checkedLeagues
     }
   }

export default connect(mapStateToProps)(TeamSelect)

Answer 1

您直接在几个地方改变状态(非常糟糕)。你必须使用 this.setState(new_state) 或 react 失去对正在发生的变化的跟踪。为了根据另一个组件的值更改一个组件的状态，您需要将依赖组件作为控制组件的子组件，以便它可以接收作为 prop 的值，或者您需要将状态更改函数传递给绑定(bind)到从属元素的控制元素。阅读有关状态如何工作和提升状态的官方 React 文档以获取更多信息。 https://reactjs.org/docs/faq-state.html

https://reactjs.org/docs/lifting-state-up.html