React Native FlatList对所有项目显示相同的值

Question

我想在FlatList上显示Value。 Flatlist是每个项目都使用通用容器。

我的问题：-

为什么每个项目都显示相同的内容？
如何解决？

我的代码：-

Main.js

renderItem({item, index}) {
        return <MyCommonView data={item} />
    }

render() {
        return (
        <View>
            <FlatList
            horizontal={true}
            bounces={false}
            showsHorizontalScrollIndicator={false}
            renderItem={this.renderItem}
            data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}, {key: 'g'}, {key: 'h'}]} />
        </View>
        );
    }

MyCommonView.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';

var value;
class MyCommonView extends Component {
    constructor(props) {
      super(props);

      value=this.props.data.key;
    }
    render() {
        return (
        <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
            <Text>{value}</Text>
        </View>
        );
    }
}

export default MyCommonView;

输出：-

h h h h h h h h h

我需要的输出：-

a b c d e f g h

Answer 1

我什至不知道你做了什么！您正在做的是在MyCommonView中声明一个全局变量。因此，最后一次更改其值是在最后一次迭代（value.key = h）。正确的方法是在每个MyCommonView组件的范围内声明一个局部变量，如下所示：

import React, {Component} from 'react';
import {View, Text} from 'react-native';

class MyCommonView extends Component {
  constructor(props) {
    super(props);

    this.value = this.props.data.key;
  }
  render() {
    return (
      <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
        <Text>{value}</Text>
      </View>
    );
  }
}

export default MyCommonView;

但是更好的是，直接使用它：

import React, {Component} from 'react';
import {View, Text} from 'react-native';

class MyCommonView extends Component {
  render() {
    return (
      <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
        <Text>{this.props.data.key}</Text>
      </View>
    );
  }
}

export default MyCommonView;

然后您甚至不需要一个类：您可以使用功能组件：

import React, {Component} from 'react';
import {View, Text} from 'react-native';

const MyCommonView = ({ data }) => (
  <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
    <Text>{data.key}</Text>
  </View>
);

export default MyCommonView;

Answer 2

在子组件中收到的道具是item，而不是data。

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

您需要呈现的内容仅在item.text

的“ MyCommonView”组件中