Question

我是新来对本机作出反应的，我已经能够从服务器成功获取json数据。我如何将对象传递到数组中并在组件中呈现。这是我的代码

我尝试使用.map（）遍历对象，但得到“未定义不是函数”。我也尝试使用Object.values将对象转换为数组，但出现错误“无法将消息的值从readablenativearray转换为字符串”

 constructor(props) {
        super(props);

    //useraccountdetails will contain the object from the server
        this.state = {
            useraccountdetails: [],
        }

        this.loaduser_account_details= this.loaduser_account_details.bind(this)

    }

    componentWillMount() {
      //this function will fetch the data from the server
        this.loaduser_account_details()
    }


    loaduser_account_details() {

        fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
            method: 'POST',
            headers: {
                'Accept': 'text/plain',
                'Content-Type': 'text/plain',
            },
            body: JSON.stringify({
                globaluseridDB: modulevariables.globaluserid,
            })
        }).then((response) => response.text())
            .then((responseJson) => {


                var jsonconvertedrows = JSON.parse(responseJson);
                var finaldata = JSON.stringify(jsonconvertedrows)


                this.setState({ useraccountdetails: finaldata });
                Alert.alert("User details", this.state.useraccountdetails)

            }).catch((error) => {
                console.error(error);
            })
    }


    //alert(this.state.useraccountdetails) gives me this [{"user_id":"107","username":"sam","year":"6"}]

    render(){
 return (

            /**page setup */
            <View style={{ backgroundColor: '#203546', flex: 1, flexDirection: 'column' }}>

                {/**body */}
                <Grid>

                     {
                        this.state.useraccountdetails.map((count)=>{
                            <Text>{count.username}</Text>
                        })
                    }



                </Grid>


            </View>
        )
}

Answer 1

它看起来像是因为您要遍历渲染中的字符串。如果您将响应设置为字符串化结果，则成功后this.state.useraccountdetails是一个字符串。要纠正此问题，您需要做的就是将setState纠正为

this.setState({ useraccountdetails: jsonconvertedrows });

Answer 2

您可以尝试以下代码吗？

 constructor(props) {
        super(props);

    //useraccountdetails will contain the object from the server
        this.state = {
            useraccountdetails: [],
        }

        this.loaduser_account_details= this.loaduser_account_details.bind(this)

    }

    componentWillMount() {
      //this function will fetch the data from the server
        this.loaduser_account_details()
    }


    loaduser_account_details() {

        fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
            method: 'POST',
            headers: {
                'Accept': 'text/plain',
                'Content-Type': 'text/plain',
            },
            body: JSON.stringify({
                globaluseridDB: modulevariables.globaluserid,
            })
        }).then((response) => response.json())
            .then((responseJson) => {


                //var jsonconvertedrows = JSON.parse(responseJson);
                //var finaldata = JSON.stringify(jsonconvertedrows)


                this.setState({ useraccountdetails: responseJson });
                Alert.alert("User details", this.state.useraccountdetails)

            }).catch((error) => {
                console.error(error);
            })
    }


    //alert(this.state.useraccountdetails) gives me this [{"user_id":"107","username":"sam","year":"6"}]

    render(){
 return (

            /**page setup */
            <View style={{ backgroundColor: '#203546', flex: 1, flexDirection: 'column' }}>

                {/**body */}
                <Grid>

                     {

                      return this.state.useraccountdetails.map((count)=>{
                          return(
                            <Text>{count.username}</Text>
                           )
                        })
                    }



                </Grid>


            </View>
        )
}

您正在尝试将响应更改为“文本”，请将其从response.text()更改为response.json()

Answer 3

按代码所示更改this.setState({ useraccountdetails: Object.values(jsonconvertedrows) });并尝试：

loaduser_account_details() {

        fetch('http://10.162.101.247/camfilaapiv2/commands/loggedin_user_account_details.php', {
            method: 'POST',
            headers: {
                'Accept': 'text/plain',
                'Content-Type': 'text/plain',
            },
            body: JSON.stringify({
                globaluseridDB: modulevariables.globaluserid,
            })
        }).then((response) => response.text())
            .then((responseJson) => {


                var jsonconvertedrows = JSON.parse(responseJson);
                var finaldata = JSON.stringify(jsonconvertedrows)


                this.setState({ useraccountdetails: Object.values(finaldata) });
                Alert.alert("User details", this.state.useraccountdetails)

            }).catch((error) => {
                console.error(error);
            })
    }

反应本机如何遍历json数据并在组件中呈现

3 个答案: