React Native 通过 map 函数传参答案

【问题标题】：React Native pass parameters through map functionReact Native 通过 map 函数传参
【发布时间】：2017-03-29 15:56:08
【问题描述】：

我刚刚学习 React Native，我想使用动态数据创建一系列按钮。我当前的代码是：

var locations = this.state.campus.map(function(item, key){
            return(
                <TouchableHighlight key={key}
                style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress({item})} >
               <Text style={
                   styles.plainText}>{item}</Text>
            </TouchableHighlight>
           )

我的问题是线条

style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]}

和

onPress={()=>this.buttonPress({item})}

我正在尝试使用地图函数之外的数据动态生成这些行。如果我使用静态数据（即分别生成每个按钮），这些代码行可以完美运行，但使用动态数据会失败。该代码确实会产生显示，因此问题不在于渲染，而在于功能。

按下按钮后，我收到错误消息 undefined in not an object，而样式只会导致整个显示不呈现。

很明显，动态数据 ({item}) 在 Text 元素中起作用，但在作为数据传递给其他两个元素时不起作用。我曾尝试使用 {{item}} 但这会引发语法错误。

有没有办法在 React Native 中处理这样的动态数据？

【问题讨论】：

对于未来的某个人......这里提供的解决方案可能会有所帮助：stackoverflow.com/questions/35663375/…
问题的发生是因为你使用了 function(item, key){ 并且你必须使用箭头函数 var locations = this.state.campus.map((item, key) => { return

标签： dynamic reactjs native

【解决方案1】：

在这两种情况下，您都不必要地将 item 包装在 {} 中。对于这两行，外部 {} 内的表达式是纯 javascript（一个数组和一个函数），应该遵循 javascript 语法。

所以这些行应该如下所示：

style={[styles.button, (this.state.location===item && styles.buttonPressed)]}

和

onPress={()=>this.buttonPress(item)}

【讨论】：

您可能是正确的，但这并不能解决问题，只会产生更多错误。我现在认为我的整个设计都是错误的，所以我将回到绘图板并研究如何以不同的方式做到这一点。我想我需要在 ListView 中创建这些按钮。
你应该 always avoid using either bind or arrow functions inside JSX/inside the render function 因为他们每次都会创建一个新函数，这会导致列表/数组/地图中的每个项目在按下单个项目时重新呈现，除非您还提供自定义比较shouldComponentUpdate 中的函数跳过比较 buttonPress 字段。

【解决方案2】：

您应该将它存储在另一个变量中：let _this =this;

然后用 _this 代替 this

【讨论】：

欢迎来到 Stack Overflow！这实际上是评论，而不是答案。多一点代表，you will be able to post comments.
您能否举例说明在何处创建此变量？

【解决方案3】：

问题的发生是因为你使用了 function(item, key){ 并且你必须使用箭头函数

let locations = this.state.campus.map((item, key) => { return <TouchableHighlight key={key}..

你必须这样做才能继续使用 'this' 上下文

【讨论】：

【解决方案4】：

此方法有效： 1) 使用动态数据创建元素的函数

createElement = (item) => {
    return(
        <TouchableHighlight onPress={()=>this.buttonPress({item})}>
            <Text style={ styles.plainText }> {item} </Text>
        </TouchableHighlight>
    )
};

2) 在下面的例子中如何使用这个函数来渲染函数：

render (
    elementsList = [];
    for (var i = 0; i < 10; i++){
        elementsList.push( this.createElement(i) );
    };

    return (
        <View>
            {elementsList}
        </View>
    )
);

如果您了解如何使用它，它会起作用。

【讨论】：

stackoverflow.com/questions/36677733/…