React Native FlatList为所有项目显示相同的值答案

【问题标题】：React Native FlatList Display Same Value For All ItemReact Native FlatList为所有项目显示相同的值
【发布时间】：2018-07-12 14:29:27
【问题描述】：

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

输出：-

hhhhhhhhh

我需要的输出：-

a b c d e f g h

【问题讨论】：

看来你的问题在于value = this.props.data.key。每次渲染组件时，您都在更改该 var，因此每个组件都将“h”作为 data.key。直接在渲染中传递。

标签： javascript android ios react-native react-native-flatlist

【解决方案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;

【讨论】：

【解决方案2】：

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

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

而你需要渲染的只是在“MyCommonView”组件中 item.text

【讨论】：