javascript - 无法根据另一个组件的关闭状态获取组件的复选框以呈现
问题描述
在我的组件中确实更新了,我 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)
解决方案
你在几个地方直接改变状态(非常糟糕)。您必须使用 this.setState(new_state) 或对正在发生的变化做出反应。为了根据另一个组件的值更改一个组件的状态,您需要将依赖组件作为控制组件的子组件,以便它可以接收值作为道具,或者您需要将状态更改函数传递给绑定到从属元素的控制元素。阅读有关状态如何工作和提升状态的官方反应文档以获取更多信息。 https://reactjs.org/docs/faq-state.html
推荐阅读
- java - 从插件重新编译反编译的类
- python - str.find() 的 numba 实现如何比纯 python 慢?
- flutter - 在 Flutter 的 GridView 中添加新页面
- javascript - 我正在使用 jsonpatch.compare 方法比较两个 JavaScript 对象并进行补丁调用
- r - 使用ggplot2重新排序可变宽度条
- python - Python获取下一次发生时间的日期时间
- javascript - 即使在页面刷新时也要在 div onclick 中保持背景颜色?
- django - 在 Heroku 上部署 Django 时出错
- javascript - 如何使用 require() 获取名称未知的类
- java - CardLayout - 不会切换回第一个面板