反应术和本地基碱无线电

Question

我试图使用本机基础模板更改反应式应用中的无线电值。单击收音机后，我想从广播中获取或设置值，无论是否完全检查。但找不到获得或设定价值的方法。单击后，即使是屏幕上的广播按钮也不会更改。代码如下：

import React, { Component } from 'react';
import { TouchableOpacity, Image, View } from 'react-native';
import { connect } from 'react-redux';
import { actions } from 'react-native-navigation-redux-helpers';
import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  InputGroup,
  Input,
  List,
  ListItem,
  Radio,  } from 'native-base';
import { openDrawer } from '../../actions/drawer';
import { Col, Row, Grid } from 'react-native-easy-grid';
import styles from './styles';
import dimension from './global';
import Swiper from 'react-native-swiper';
const imgBoy = require('../../../images/icon_boy.png');
const imgGirl = require('../../../images/icon_girl.png');
const {
  popRoute,
} = actions;
class SessionPage extends Component {
  static propTypes = {
    name: React.PropTypes.string,
    index: React.PropTypes.number,
    list: React.PropTypes.arrayOf(React.PropTypes.string),
    openDrawer: React.PropTypes.func,
    popRoute: React.PropTypes.func,
    navigation: React.PropTypes.shape({
      key: React.PropTypes.string,
    }),
  }
  popRoute() {
    this.props.popRoute(this.props.navigation.key);
  }
  constructor(props) {
    super(props);
    // console.log(this.props.navigation);
    this.state = {
      sliderCount : parseInt(this.props.navigation.behavior.length / 5) + 1,
      sliderArray : [],
      selected : false,
    }
    this.getSliderArray();
    console.log(this.state);
  }
  getSliderArray() {
    for (var i = 0; i < this.state.sliderCount; i++) {
      var childArray = [];
      for (var j = i * 5; j < 5 * (i + 1); j++) {
        if (this.props.navigation.behavior[j] != null){
          var unit = this.props.navigation.behavior[j];
          unit.selected = true;
          childArray.push(unit);
        }
      }
      this.state.sliderArray.push({
        index : i,
        behaviors : childArray
      })
    }
  }
  selectRadio(i, j){
    this.state.sliderArray[i].behaviors[j].selected = true;
  }
  render() {
    const { props: { name, index, list } } = this;
    return (
      <Container style={styles.container}>            
          <Swiper style={styles.wrapper}
            height={dimension.Height - 400}
            width={dimension.Width - 40}
            showsButtons={false}
            showsPagination={true}>
            {this.state.sliderArray.map((item, i) =>
              <View style={styles.slide1} key={i}>
                  {item.behaviors.map((subitem, j) =>
                      <ListItem key={i + "-" + j} style={styles.cardradio}>
                            <Radio selected={this.state.sliderArray[i].behaviors[j].selected} onPress={() => this.selectRadio(i, j)} />
                            <Text>{subitem.behaviorName}</Text>
                      </ListItem>
                  )}
              </View>
            )}
          </Swiper>
        </Content>
      </Container>
    );
  }
}

function bindAction(dispatch) {
  return {
    openDrawer: () => dispatch(openDrawer()),
    popRoute: key => dispatch(popRoute(key)),
  };
}
const mapStateToProps = state => ({
  navigation: state.cardNavigation,
  name: state.user.name,
  index: state.list.selectedIndex,
  list: state.list.list,
});

export default connect(mapStateToProps, bindAction)(SessionPage);

Answer 1

selectRadio(i, j){
  this.state.sliderArray[i].behaviors[j].selected = true; <== This is the problem
}

在安装组件后调用this.state = something时，它不会触发update组件生命周期的方法。因此，视图不会更新。

您应该使用this.setState()更新视图

this.setState({
    slider = something
})

有关更多信息，请参阅文档

this.setState()是一种异步方法。更改getSliderArray()后，它可能不会反映在立即的console.log

中

this.getSliderArray();
console.log(this.state);

您可以将回调转到this.setState（）才能在更改状态后执行任何操作

this.setState({
   // new values
}, function() {
   // Will be called only after switching to new state 
})