对于 React Native 的两种方式数据绑定，更改不会反映在 View 中答案

【问题标题】：Changes does not reflect in View for two way data binding of React Native对于 React Native 的两种方式数据绑定，更改不会反映在 View 中
【发布时间】：2018-10-18 10:59:13
【问题描述】：

我正在使用来自 web 服务的动态 JSON 对象创建卡片列表。单击每个卡片项目时，我想要两种方式的数据绑定。当我单击每个卡片项目并更改相应 JSON 对象的数据更改但视图中没有更改时。

这是我的代码

import React, { Component } from 'react';
import {
        Platform,
        StyleSheet,
        Text,
        View,
        ImageBackground,
        Image,
        Dimensions,
        TouchableOpacity,
        TextInput,
        ScrollView,
        ActivityIndicator
} from 'react-native';
import { Container, Header, Content, Button, Tab, Tabs, Footer, Left, Body, Right, Icon, Title, Card, CardItem, List, ListItem } from 'native-base';
export default class natureOfInvestment extends React.Component {
        static navigationOptions = {
            header: null
        };

    constructor(props) {
        super(props);
        this.state = {
            session_id: this.props.navigation.state.params.session_id,
            loading: true,
            investmentItems: [],
        }
    }

    componentDidMount() {
        this.onLoadSelectInvestment();
    }

    onLoadSelectInvestment() {
        return fetch(CommonTasks.ROOT_URL + 'user/pageTwo', {
            method: 'GET',
        })
            .then((response) => response.json())
            .then((responseJson) => {
                var investment = responseJson.all_categories;
                var investment_items = [];
                for (var data of investment) {
                    data.showhide = true;
                    data.text = '';
                    investment_items.push(data);
                }
                this.setState({
                    loading: false,
                    investmentItems: investment_items,
                })
            })
    }

    investmentType(e, item) {
        if (item.showhide == true) {
            item.showhide = false;
        }
        else {
            item.showhide = true;
        }
        console.log(item);
    }

    render() {
        return (
            <Container>
                <View>
                    <List style={{ paddingHorizontal: 7 }}
                        dataArray={this.state.investmentItems}
                        renderRow={(item) =>
                            <Card>
                                <CardItem style={{ backgroundColor: item.background_color, }}>
                                    <Body>
                                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }}
                                            key={item.cat_id}
                                            onPress={this.investmentType.bind(this, item)}
                                        >
                                            <View style={{ width: 250, paddingRight: 10 }}>
                                                <Text style={{ color: 'white', fontSize: 17, marginLeft: 10 }}>
                                                    {item.category_name}
                                                </Text>
                                            </View>
                                            <Right>
                                                <Image
                                                    style={{ width: 18, height: 18, }}
                                                    source={require('../assets/images/right_arrow.png')}
                                                />
                                            </Right>
                                        </TouchableOpacity>
                                    </Body>
                                </CardItem>
                                {
                                    item.showhide ?
                                        <View style={{ flexDirection: 'column', margin: 10 }}>
                                            <View style={{ borderColor: 'black', borderRadius: 4, borderWidth: 0.7, }}>
                                                <TextInput
                                                    style={{ textAlignVertical: 'top' }}
                                                    placeholder="Please write the details"
                                                    underlineColorAndroid="transparent"
                                                    multiline={true}
                                                    numberOfLines={4}
                                                    onChangeText={(text) => { item.text = text }}

                                                />
                                            </View>
                                        </View>
                                        : null
                                }
                            </Card>
                        }
                    />
                </View>
            </Container>
        );
    }
}

我想显示/隐藏 TextInput 视图或更改 JSON 对象中将反映在列表视图中的数据。

提前致谢。

【问题讨论】：

标签： react-native

【解决方案1】：

查看关于 List 的原生文档后，我发现他们使用 View 组件，因此您必须重新渲染 List 组件，您可以这样做：

 onLoadSelectInvestment() {
    return fetch(CommonTasks.ROOT_URL + 'user/pageTwo', {
        method: 'GET',
    })
        .then((response) => response.json())
        .then((responseJson) => {
            var investment = responseJson.all_categories;
            var investment_items = [];
            for (var data of investment) {
                data.showhide = true;
                data.text = '';
                investment_items.push(data);
            }
            this.setState({
                loading: false,
                investmentItems: investment_items,
            })
            List.forceUpdate();
        })
}

但请注意，它会重新渲染整个列表。

【讨论】：

你好@T.sagiv。感谢您的回复。
我已经按照你说的修改了我的代码。但是我可以在 InvestmentType() 方法中看到控制台但在 View 中没有变化的每个对象的数据发生变化。
看看我对我的回答所做的编辑，如果它不起作用，请告诉我。
您好@T.sagiv 我从stackoverflow.com/questions/33426760/… 链接获得了我需要的解决方案。谢谢