如何在 ListView 中的一行内更改状态中的开关状态 - React Native

Question

各位程序员，您好，我在开发这个 React-Native 应用程序时遇到了这个问题，我正在渲染一个“服务”的 ListView，其中每一行都有一个文本和一个开关，我可以渲染它但是当我点击行的开关以快速更改它返回到初始值的值，我想知道如何保持这个 vale 的变化，但由于我是新手，所以我对这是如何完成的一无所知：到目前为止我有我调用我的 ListItem 组件的 ListView 组件，这是我的代码；

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>
        );
    }

}

ListItem.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 的状态的值。我还没有对此进行测试并从头顶写下它，但是您应该通过在这里和那里引入一些小的更改来实现它：

ListItem.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;

ListView.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>
        );
    }

}