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

我想在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

最佳答案

我什至不知道你做了什么!您正在做的是在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;