React Native 一个组件只被渲染一次答案

【问题标题】：React Native a component being only rendered onceReact Native 一个组件只被渲染一次
【发布时间】：2017-07-17 19:02:27
【问题描述】：

我正在使用这两个库从“react-native-swipe-cards”导入 SwipeCards；和从 'react-native-auto-typing-text' 导入 AutoTypingText；

在我拥有的每张卡片中，我都使用 AutoTypingText，问题是它在所有卡片中都使用相同的文本，唯一改变的是 this.props.Nickname

这不是 AutoTypingText 的 text 属性的一部分

子卡组件：

render() {
    return (
        <View style={styles.viewStyle}>
            <Text style={styles.titleText}>{this.props.Nickname}</Text>
            <AutoTypingText
                text={"\nAge: " + this.props.Age + "\n"
                    + "City: " + this.props.City + "\n"
                    + "Recent Login: " + this.props.RecentActivity + "\n"
                    + "Points: " + this.props.Points + "\n"
                    + "About: \"" + this.props.About + "\"\n"
                }
                charMovingTime={0}
                style={textStyle}
                delay={0}
                onComplete={() => {
                    console.log('done');
                    console.log(this.state)
                }}
            />

            <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                <Button style={styles.buttonStyle} textStyle={styles.buttonText}>
                    Exploit !
                </Button>
                <Button style={styles.buttonStyle} textStyle={styles.buttonText}>
                    Spare
                </Button>
            </View>
        </View>
    );
    }
}

父卡列表

const Cards = [
{
    Nickname: "S4nr0",
    Age: 25,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "I <3 Kittenz",
    Points: 1337
},
{
    Nickname: "Sr00lik",
    Age: 23,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "If Internet explorer is brave\nenough to ask you to be your\n default browser, you're brave \nenough to ask that girl out",
    Points: 1337
},
{
    Nickname: "Bomba",
    Age: 24,
    City: "New-York",
    RecentActivity: "17/07/2016 14:11PM",
    About: "I'm Awesome !",
    Points: 1337
}
];

export default React.createClass({
    getInitialState() {
    return {
      cards: Cards
    }
  },
render() {
    return (
      <SwipeCards
        cards={this.state.cards}
        renderCard={(cardData) => <Card {...cardData} />}
      />
    )
    }
})

澄清一下：好像 AutoTypingText 就像一个单例（我知道不是），因为它的结果在所有卡片中都是相同的

【问题讨论】：

标签： reactjs react-native react-native-component

【解决方案1】：

这不是正确的答案，但在本机反应中，通常有助于为重复的元素提供关键属性，以确保“虚拟 DOM”检测到更改。

所以你可以这样做：

<AutoTypingText
            key={this.props. Nickname}
            text={"\nAge: " + this.props.Age + "\n"
                + "City: " + this.props.City + "\n"
                + "Recent Login: " + this.props.RecentActivity + "\n"
                + "Points: " + this.props.Points + "\n"
                + "About: \"" + this.props.About + "\"\n"
            }
            ...

试一试； )

【讨论】：

非常感谢！