Question

有人可以向我解释为什么一遍又一遍地重复我的数据和标题，我该如何解决这个问题？

我也有一条黄色的错误消息，我认为这可能是相关的，它显示为“警告：列表中的每个孩子都应该有一个唯一的“键”道具。

这可能是基本的东西，但是我是新来的反应者，可以从这里的人们那里学到很多东西，并感谢您的帮助！

谢谢

import React from "react";
import { StyleSheet, FlatList, Text, View } from "react-native";
import styled from "styled-components";

export default class FetchExample extends React.Component {
  static navigationOptions = {
    header: null
  };

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

  componentDidMount() {
    const localMovieData = require("../assets/test.json");

    this.setState(
      {
        isLoading: false,
        dataSource: localMovieData.movies
      },
      function() {}
    );
  }

  _renderItem = info => {
    return (
      <View>
        <Title style={styles.title}> Contact Information </Title>
        {this.state.dataSource.map((movie, index) => (
          <Text style={styles.text}>
            {movie.name} - {movie.contact}
          </Text>
        ))}
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={this._renderItem}
          keyExtractor={({ id }, index) => id}
        />
      </View>
    );
  }
}
const Title = styled.Text`
  font-size= 16px;
  color: #b8bece;
  font-weight: 500;
  `;

const styles = StyleSheet.create({
  container: {
    paddingVertical: 50,

    backgroundColor: "#f0f3f5"
  },
  text: {
    fontSize: 15,
    color: "#008000",
    padding: 10
  },
  image: {
    width: 45,
    height: 45,
    borderRadius: 20,
    marginLeft: 20
  },
  title: {
    fontSize: 16,
    color: "black"
  }
});

JSON数据

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "name": "Tim ", "contact": "xxx@ymail.com" },
    { "id": "2", "name": "Bradley", "contact": "xxx@ymail.com" },
    { "id": "3", "name": "James", "contact": "outlook.com" },
    { "id": "4", "name": "Elle", "contact": "hotmail" },
    { "id": "5", "name": "Bob", "contact": "yahoo" }
  ]
}

Answer 1

问题出在您的“ renderItem”方法上

FlatList组件接收数据时，会自动将其分离为对象并将其发送到“ renderItem”方法

所以您需要做的是：在render函数中，获取每个项目的item属性，并将其发送到_renderItem

删除每个renderItem内的映射并按如下方式访问新项目：

_renderItem = item => {
    return (
      <View>
        <Text style={styles.title}> Contact Information </Text>         
          <Text>
            {item.name} - {item.contact}
          </Text>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={(item)=>this._renderItem(item.item)}
          keyExtractor={(item, index) => {return item.id;}}  
      />
      </View>
    );
  }

主要警告：

您需要像这样返回密钥

keyExtractor={(item, index) => {
     return item.id;
    }}

您可以看到有效的代码here

Answer 2

您不需要遍历 _renderItem 内部的数据源，因为 FlatList 将为每个数组项调用它的 renderItem 函数。 / p>

因此，如下更改 _renderItem 函数

_renderItem = el => {
  const movie = el.item;
  return (
    <View>
      <Title style={styles.title}> Contact Information </Title>  
      <Text style={styles.text}>
        {movie.name} - {movie.contact}
      </Text>
    </View>
  );
};

重复的JSON数据-React Native

2 个答案: