Question

我仍然是新的反应本地人，我一直在遵循以下教程：

在第5部分，我卡住了。我加倍检查代码并尝试使用react-native文档中的变体。没运气。

我应该在模拟器上看到一个项目列表，但没有任何反应，也没有错误。

我完全按照视频和视频中的说明进行操作，但它在我的电脑上无效。必须是一件小事......

我在模拟器底部收到以下警告：

//App.js
import React, { Component } from 'react';
import {
  Platform,
  Text,
  View
} from 'react-native';

import Component5 from './components/Component5';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View>       
          <Component5 />         
      </View>
    );
  }
}

//Component5.js
import React, { Component } from 'react';
import { AppRegistry, Text, View, ListView, StyleSheet } from 'react-native';

export default class Component5 extends Component {
    constructor() {
        super();
        console.log('constructor');
        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            userDataSource: ds,
        };
    }
    componentDidMount() {
        console.log('componentDidMount');
        this.fetchUsers();
    }




fetchUsers() {
        console.log('fetchUsers');
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response) => response.json())
            .then((respone) => {
                this.setState({
                    userDataSource: this.state.userDataSource.cloneWithRows(response),
                });

            }).catch(function (error) {
                console.log('There has been a problem with your fetch operation: ' + error.message);
                throw error;
            });
    }

    renderRow(user, sectionId, rowId, highlightRow) {
        console.log('renderRow');
        return (
            <View style={styles.row}>
                <Text style={styles.rowText}>{user.name}</Text>
            </View>
        )
    }

    render() {
        console.log('render');
        return (
            <ListView dataSource={this.state.userDataSource}
                renderRow={this.renderRow.bind(this)} />
        );
    }
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 10,
        backgroundColor: '#f4f4f4',
        marginBottom: 3
    },
    rowText: {
        flex: 1
    }
});

AppRegistry.registerComponent('Component5', () => Component5);

//index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('myapp', () => App);

Answer 1

In the second then you have a typo: respone instead of response:

.then((respone) => {
     this.setState({
         userDataSource: this.state.userDataSource.cloneWithRows(response),
     });

})

Could this be the problem?

我有一个反应原生的Listview组件，我似乎无法修复

1 个答案: