Javascript 反应状态从一个组件不一致地传递到下一个组件
我有两个组件：联盟选择和团队选择 我现在要做的就是将选中的联赛状态从LeagueSelect传递到TeamSelect 当前的设置是，如果选中了相应的联赛，则选中TeamSelect中的复选框 问题：从LeagueSelect到TeamSelect的状态不一致 这是一个它看起来像什么的视频： 如果未选中某个框，则状态会更新为“团队中”，如您在console.log中所看到的，但是，当您再次尝试选中同一个框时，状态不会在团队中更新 我最初试图用redux实现这一点，认为这是一个redux问题，转而直接将状态传递给子组件，并意识到问题一定在其他地方 这是我的LeagueSelect组件：Javascript 反应状态从一个组件不一致地传递到下一个组件,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我有两个组件：联盟选择和团队选择 我现在要做的就是将选中的联赛状态从LeagueSelect传递到TeamSelect 当前的设置是，如果选中了相应的联赛，则选中TeamSelect中的复选框 问题：从LeagueSelect到TeamSelect的状态不一致 这是一个它看起来像什么的视频： 如果未选中某个框，则状态会更新为“团队中”，如您在console.log中所看到的，但是，当您再次尝试选中同一个框时，状态不会在团队中更新 我最初试图用redux实现这一点，认为这是一个redux问题，转
import React, { Component } from 'react';
import { View, Text, Modal, TouchableHighlight, FlatList, Button } from 'react-native'
import { loadLeagues } from '../actions'
import { connect } from 'react-redux'
import Check from './CheckBox'
import axios from "axios"
import { loadCards, loadTeams, changeLeagues } from '../actions'
import { Icon } from 'native-base'
import TeamSelect from './TeamSelect'
class LeagueSelect extends Component {
constructor(props) {
super(props)
this.state = {
modalVisible: false,
checked: [],
checkedLeagues: [],
checkMessage: ''
}
}
setModalVisible(visible) {
this.setState({modalVisible: visible})
if(this.state.checked.length === 0) {
this.props.league.map(
(v, i) => {
this.state.checked.push(true)
this.state.checkedLeagues.push(v.acronym)
}
)
}
this.setState({ checkMessage: '' })
}
changeCheck = (index, acronym) => {
//local variable to create query param
firstString = []
//adds to local variable if not checked, takes out variable if checked
if(!this.state.checkedLeagues.includes(acronym)) {
firstString.push(acronym)
} else {
firstString.filter(v => { return v !== acronym})
}
//adds leagues that could be in the current state that were not just passed in
this.state.checkedLeagues.map(
(v, i) => {
if(v !== acronym) {
firstString.push(v)
}
}
)
//updates checked leagues state
//makes api call with parameters set
//prevents all leagues being unselected
if(acronym === this.state.checkedLeagues[0] && firstString.length === 0) {
this.setState({ checkMessage: `Don't you want something to look at?` })
} else {
if(!this.state.checkedLeagues.includes(acronym)){
this.state.checkedLeagues[this.state.checkedLeagues.length] = acronym
this.setState({ checkedLeagues: this.state.checkedLeagues })
} else {
newChecked = this.state.checkedLeagues.filter(v => { return v !== acronym})
this.setState({checkedLeagues: newChecked})
}
//updating the check
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)
})
}
}
render() {
return (
<View style={{ position: 'relative'}}>
<Text
style={{
paddingTop: 8,
paddingLeft: 5,
fontSize: 15
}}
>Leagues</Text>
<View
style={{
flexDirection:"row",
}}
>
{this.props.league === null ?'' : this.props.league.map(
(v, i) => {
return(
<View
key={i}
style={{
alignSelf: 'flex-end',
flexDirection:"row",
top: 4,
}}
>
<Check
checked={this.state.checked[i]}
index={i}
value={v.acronym}
changeCheck={this.changeCheck}
/>
<Text
style={{
paddingLeft: 23,
}}
>{v.acronym}</Text>
</View>
)
}
)}
</View>
<Text
style={{
paddingLeft: 10,
paddingTop: 12,
fontStyle: 'italic',
color: '#F4AF0D'
}}
>{this.state.checkMessage}</Text>
<TeamSelect checkedLeagues={this.state.checkedLeagues}/>
</View>
</View>
);
}
}
export default LeagueSelect
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
}
}
render() {
console.log('in team', this.props.checkedLeagues)
return(
<View>
{
this.props.team === null ?'' : this.props.team.map(
(v, i) => {
return(
<View key={i}>
<Check
checked={ this.props.checkedLeagues.includes(v.league.acronym) ? true : false }
index={i}
value={v.team_name}
changeCheck={this.changeCheck}
/>
{ v.team_name === undefined ? null :
<Text>{v.team_name}</Text>}
</View>
)
}
)
}
</View>
)
}
}
export default TeamSelect
import React，{Component}来自'React'；
从“react native”导入{视图、文本、模式、TouchableHighlight、平面列表、按钮}
从“../actions”导入{loadLeagues}
从“react redux”导入{connect}
从“./CheckBox”导入检查
从“axios”导入axios
从“../actions”导入{loadCards、LoadTeam、changeLeagues}
从“本机基”导入{Icon}
从“/TeamSelect”导入TeamSelect
类LeagueSelect扩展组件{
建造师（道具）{
超级（道具）
此.state={
modalVisible:错误，
已勾选：[]，
支票联盟：[]，
检查消息：“”
}
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）
if（this.state.checked.length==0）{
这个。道具。联盟。地图(
（v，i）=>{
this.state.checked.push（true）
this.state.checkedLeagues.push（v.首字母缩写）
}
)
}
this.setState（{checkMessage:''}）
}
changeCheck=（索引，首字母缩写）=>{
//用于创建查询参数的局部变量
firstString=[]
//如果未选中，则添加到局部变量；如果选中，则取出变量
如果（！this.state.checkedLeagues.includes（缩写））{
firstString.push（首字母缩写）
}否则{
filter（v=>{return v！==acronym}）
}
//添加可能处于当前状态的联盟，这些联盟不是刚刚传入的
this.state.checkedLeagues.map(
（v，i）=>{
if（v！==首字母缩写）{
firstString.push（v）
}
}
)
//更新已检查的联盟状态
//使用设置的参数进行api调用
//防止未选中所有联盟
if（首字母缩写===this.state.checkedLeagues[0]&&firstString.length==0）{
this.setState（{checkMessage:`你不想看什么吗？`}）
}否则{
如果（！this.state.checkedLeagues.includes（缩写））{
this.state.checkedLeagues[this.state.checkedLeagues.length]=首字母缩写
this.setState（{checkedLeagues:this.state.checkedLeagues}）
}否则{
newChecked=this.state.checkedLeagues.filter（v=>{return v！==acronym}）
this.setState（{checkedLeagues:newChecked}）
}
//更新支票
this.state.checked[index]=！this.state.checked[index]
this.setState（{checked:this.state.checked}）
查询字符串=[]
firstString.map(
（v，i）=>{
if（queryString.length<1）{
queryString.push（`？league=${v}`）
}否则如果（queryString.length>=1）{
queryString.push（`&league=${v}`）
}
}
)
axios.get(`http://localhost:4000/reports${queryString.join（“”）}`）
。然后（响应=>{
this.props.loadCards（response.data）
})
}
}
render（）{
返回(
联盟
{this.props.league===null？''：this.props.league.map(
（v，i）=>{
返回(
{v.首字母缩略词}
)
}
)}
{this.state.checkMessage}
);
}
}
导出默认联盟选择
import React, { Component } from 'react';
import { View, Text, Modal, TouchableHighlight, FlatList, Button } from 'react-native'
import { loadLeagues } from '../actions'
import { connect } from 'react-redux'
import Check from './CheckBox'
import axios from "axios"
import { loadCards, loadTeams, changeLeagues } from '../actions'
import { Icon } from 'native-base'
import TeamSelect from './TeamSelect'
class LeagueSelect extends Component {
constructor(props) {
super(props)
this.state = {
modalVisible: false,
checked: [],
checkedLeagues: [],
checkMessage: ''
}
}
setModalVisible(visible) {
this.setState({modalVisible: visible})
if(this.state.checked.length === 0) {
this.props.league.map(
(v, i) => {
this.state.checked.push(true)
this.state.checkedLeagues.push(v.acronym)
}
)
}
this.setState({ checkMessage: '' })
}
changeCheck = (index, acronym) => {
//local variable to create query param
firstString = []
//adds to local variable if not checked, takes out variable if checked
if(!this.state.checkedLeagues.includes(acronym)) {
firstString.push(acronym)
} else {
firstString.filter(v => { return v !== acronym})
}
//adds leagues that could be in the current state that were not just passed in
this.state.checkedLeagues.map(
(v, i) => {
if(v !== acronym) {
firstString.push(v)
}
}
)
//updates checked leagues state
//makes api call with parameters set
//prevents all leagues being unselected
if(acronym === this.state.checkedLeagues[0] && firstString.length === 0) {
this.setState({ checkMessage: `Don't you want something to look at?` })
} else {
if(!this.state.checkedLeagues.includes(acronym)){
this.state.checkedLeagues[this.state.checkedLeagues.length] = acronym
this.setState({ checkedLeagues: this.state.checkedLeagues })
} else {
newChecked = this.state.checkedLeagues.filter(v => { return v !== acronym})
this.setState({checkedLeagues: newChecked})
}
//updating the check
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)
})
}
}
render() {
return (
<View style={{ position: 'relative'}}>
<Text
style={{
paddingTop: 8,
paddingLeft: 5,
fontSize: 15
}}
>Leagues</Text>
<View
style={{
flexDirection:"row",
}}
>
{this.props.league === null ?'' : this.props.league.map(
(v, i) => {
return(
<View
key={i}
style={{
alignSelf: 'flex-end',
flexDirection:"row",
top: 4,
}}
>
<Check
checked={this.state.checked[i]}
index={i}
value={v.acronym}
changeCheck={this.changeCheck}
/>
<Text
style={{
paddingLeft: 23,
}}
>{v.acronym}</Text>
</View>
)
}
)}
</View>
<Text
style={{
paddingLeft: 10,
paddingTop: 12,
fontStyle: 'italic',
color: '#F4AF0D'
}}
>{this.state.checkMessage}</Text>
<TeamSelect checkedLeagues={this.state.checkedLeagues}/>
</View>
</View>
);
}
}
export default LeagueSelect
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
}
}
render() {
console.log('in team', this.props.checkedLeagues)
return(
<View>
{
this.props.team === null ?'' : this.props.team.map(
(v, i) => {
return(
<View key={i}>
<Check
checked={ this.props.checkedLeagues.includes(v.league.acronym) ? true : false }
index={i}
value={v.team_name}
changeCheck={this.changeCheck}
/>
{ v.team_name === undefined ? null :
<Text>{v.team_name}</Text>}
</View>
)
}
)
}
</View>
)
}
}
export default TeamSelect
import React，{Component}来自“React”
从“react native”导入{Text，View}
从“react redux”导入{connect}
从“../actions”导入{loadTeams，loadLeagues}
从“./CheckBox”导入检查
类TeamSelect扩展组件{
建造师（道具）{
超级（道具）
此.state={
已勾选：[]，
检查组：[]，
setOnce:0
}
}
render（）{
console.log（'in team'，this.props.checkedLeagues）
返回(
{
this.props.team==null？“”：this.props.team.map(
（v，i）=>{
返回(
{v.team_name==未定义？空：
{v.team_name}
)
}
)
}
)
}
}
导出默认团队选择
this.setState（{checkedLeagues:this.state.checkedLeagues}）const { leagues } = this.state
{leagues.map((league, i) => (
<View
key={league.acronym}
style={{
alignSelf: 'flex-end',
flexDirection:"row",
top: 4,
}}>
<Check
checked={league.checked}
index={i}
value={league.acronym}
changeCheck={this.changeCheck}
/>
<Text
style={{
paddingLeft: 23,
}}
>{league.acronym}</Text>
</View>
)
)}