如何在列表视图中的行内更改开关状态 - React Native

Question

各位程序员，您在开发此 React-Native 应用程序时遇到了这个问题，我正在渲染"服务"的列表视图，其中每一行都有一个文本和一个开关，我可以渲染它，但是当我点击该行的开关以更改它的值时，它会很快恢复到其初始值， 我想知道如何保持 vale 的这种变化，但由于我是新手，我对如何做到这一点一无所知：到目前为止，我有一个 ListView 组件，我在其中调用我的 ListItem 组件，这是我的代码;

class ListView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            servicios: []
        };
    }
    componentDidMount() {
        AsyncStorage.getItem("token").then((value) => {
            axios.get('http://MYURL/api/servicio/index?token=' + value)
                .then(response => this.setState({ servicios: response.data.servicios }))
                .catch(function (error) {
                    console.log(error);
                });
        }).done();
    }
    renderList() {
        console.log('here');
        return this.state.servicios.map(servicio =>
            <ListItem key={servicio.id} servicio={servicio} />);
    }
    render() {
        const { navigation } = this.props.navigation;
        return (
            <ScrollView>
                {this.renderList()}
            </ScrollView>
        );
    }
}

列表项.js

const ListItem = ({ servicio }) => {
const { nombre, created_at, estatus } = servicio;
const { thumbnailStyle, headerContentStyle, thumbnailContainerStyle, headerTextStyle, imageStyle } = styles;
return (
    <Card>
        <CardSection>
            <View style={thumbnailContainerStyle}>
                <Text style={headerTextStyle}>{nombre}</Text>
            </View>
            <View style={headerContentStyle}>
                <Switch value={estatus}/>
            </View>
        </CardSection>
    </Card>
);
export default ListItem;

我

错过了不要让这篇文章太长的样式，我可能知道我必须将当前的行开关状态放在状态中，但我不知道该怎么做，如果你们能帮助我，我会很高兴？提前谢谢。

Answer 1

为了更改开关的值，您需要更改呈现 ListView 的状态中的值。我还没有测试过，而是从我的头顶上写下来的，但你应该通过在这里和那里引入一些小的改变来实现它：

列表项.js

const ListItem = ({ servicio, onToggleSwitch }) => {
  const { nombre, created_at, estatus, id } = servicio;
  const { thumbnailStyle, headerContentStyle, thumbnailContainerStyle, headerTextStyle, imageStyle } = styles;
  return (
    <Card>
        <CardSection>
            <View style={thumbnailContainerStyle}>
                <Text style={headerTextStyle}>{nombre}</Text>
            </View>
            <View style={headerContentStyle}>
                <Switch value={estatus} onValueChange={(value) => onToggleSwitch(id, value)} />
            </View>
        </CardSection>
    </Card>
);
export default ListItem;

列表视图.js

class ListView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            servicios: []
        };
    }
    onToggleSwitch = (id, value) => {
      const servicios = [...this.state.servicios]
      const index = servicios.findIndex(item => item.id === id)
      servicios[index].estatus = value
      this.setState({ servicios })
    }
    componentDidMount() {
        AsyncStorage.getItem("token").then((value) => {
            axios.get('http://MYURL/api/servicio/index?token=' + value)
                .then(response => this.setState({ servicios: response.data.servicios }))
                .catch(function (error) {
                    console.log(error);
                });
        }).done();
    }
    renderList() {
        console.log('here');
        return this.state.servicios.map(servicio =>
            <ListItem key={servicio.id} servicio={servicio} onToggleSwitch={this.onToggleSwitch} />);
    }
    render() {
        const { navigation } = this.props.navigation;
        return (
            <ScrollView>
                {this.renderList()}
            </ScrollView>
        );
    }
}