Question

我正在使用Flatlist从api渲染数据，这些数据也被渲染并显示。但是问题是项目被多次显示。我从api中获得了5个项目，但是那5个项目正在重复。

我已实现如下：

export default class FlatSpeakers extends Component {
constructor(props) {
    super(props);
    this.state = { isLoading: true, data: [] }
}
componentDidMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
       .then(res => {
            this.setState({
                isLoading: false,
                data: res.data,
            })
        })
}
renderItem() {
    return (
        this.state.data.map(item =>
          <SpeakersDetails key={item.title} speakerD={item} />
        )
      )
}

render() {
    if (this.state.isLoading) {
        return (
           <View style={{ flex: 1, padding: 20 }}>
                <ActivityIndicator />
            </View>
        )
    }

    return (
        <View style={styles.container}>
            <FlatList
                data={this.state.data}
                renderItem={this.renderItem.bind(this)}
                keyExtractor={item => item.id}
            />
        </View>
    );
}
}

我已经实现了SpeakersDetails组件，如下所示：

const SpeakersDetails = ({ speakerD }) => {

const { title, artist, thumbnail_image, image, url } = speakerD;
const {
    thumbnailStyle,
    headerContentStyle,
    thumbnailContainerStyle,
    headerTextStyle,
    imageStyle
} = styles;

return (
    <Card>
        <CardSection>
            <View style={thumbnailContainerStyle}>
                <Image
                    style={thumbnailStyle}
                    source={{ uri: image }}
                />
            </View>
            <View style={headerContentStyle}>
                <Text style={headerTextStyle}>{title}</Text>
                <Text>{artist}</Text>
            </View>
        </CardSection>
    </Card>
);
 };

Answer 1

FlatList遍历data并为其中的每个项目调用renderItem，您将在每次调用时呈现完整列表，这就是为什么重复项目的原因。

renderItem接收当前项目作为参数，尝试像这样更改功能：

renderItem({item}) {
    return (
          <SpeakersDetails key={item.title} speakerD={item} />
      )
}

检查renderItem documentation以获得更多详细信息，包括此函数接收的其他参数。

Answer 2

您应该更改用于渲染FlatList项目的平面列表回调，以将项目传递给renderItem函数。现在，您从API调用获得项目的过程中，迭代状态的次数就很多。每5次重复5次表示含义。

问题的解决方案是进行如下调用和make renderItem函数，您应该将item对象传递给renderItem函数：

<FlatList
    data={this.state.data}
    renderItem={({item}) => this.renderItem.bind(this, item)}
    keyExtractor={item => item.id} />

您的renderItem函数调用应接受item对象作为参数，并从传递的对象中呈现UI：

renderItem(item) {
    return (
        <SpeakersDetails key={item.title} speakerD={item} />
    )
}

平面列表多次显示相同的项目

2 个答案: