reactjs - TypeError：请求的键值不是对象。React-native Listview

问题描述

当我使用 <Listview />. Axios用于api请求。有两个组件：

<JsonHome />
<ListItem />

ListItem是的子组件JsonHome。

杰森家

constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
        this.goToDetail = this.goToDetail.bind(this);
        this.dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    }
    componentDidMount() {
        axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data,
                });
            })
    }
    goToDetail(id) {
        this.props.navigation.navigate('Detail', {
            id: id
        });
    }

    render() {
        return (
            <View style={styles.itemList}>
                <ScrollView>
                    <ListView
                        dataSource={this.dataSource.cloneWithRows(this.state.data)}
                        renderRow={(item) => <ListItem item={item} onTouch={this.goToDetail} />}
                    />
                </ScrollView>
            </View>
        )
    }

项目清单

const ListItem = (props) => {
    const item = props.item;
    return (
        <View style={styles.item} >
            <TouchableOpacity onPress={() => props.onTouch(item.id)}>
                <Text style={styles.itemText}>{`${item.id} ${item.title}`}</Text>
            </TouchableOpacity>
        </View>
    )
}

api响应：

[
 {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
 },
 {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
 }
]

标签： reactjsreact-native

你使用的是什么版本的 react-native？根据文档 ListView，不推荐使用 aFlatList来提高性能。我怀疑 ListView 无法提取适合密钥使用的默认值。FlatList 具有大多数可用的相同道具，以及keyExtractor道具功能，如果您的数据不适合默认键。

constructor(props) {
  super(props);
  this.state = {
    isLoading: true
  }
}

componentDidMount() {
  axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(res => this.setState({
     isLoading: false,
     data: res.data,
  });
}

goToDetail = (id) => {
  this.props.navigation.navigate('Detail', { id: id });
}

ListItem = ({ item, onTouch }) => (
  <View style={styles.item} >
    <TouchableOpacity onPress={() => onTouch(item.id)}>
      <Text style={styles.itemText}>{`${item.id} ${item.title}`}</Text>
    </TouchableOpacity>
  </View>
);

render() {
  return (
    <View style={styles.itemList}>
      <ScrollView>
        <FlatList
          data={this.state.data}
          renderRow={(item) => <ListItem item={item} onTouch={this.goToDetail} />}
        />
      </ScrollView>
    </View>
  )
}

reactjs - TypeError：请求的键值不是对象。React-native Listview

问题描述

解决方案

推荐阅读