反应本机 - 试图根据索引状态打印

Question

我试图循环循环通过此数组并打印出报价，具体取决于它是否保存为真或错误。目前，它只是在JSON数组中打印出来。我是新手反应天然的，所以不是100％map的行为。

var savedQuote = quotes.quotesArray.map(quote => quote.isSaved) 
{
                  quotes.quotesArray.map((quote, i) => {
                    if(savedQuote){
                        return(                            
                            <TouchableOpacity key={i} style = {styles.border}>
                              <Text style = {styles.text}>
                                i: {i}. {quotes.quotesArray[i].preview}
                              </Text>
                            </TouchableOpacity> 
                        )
                    }
                    else{
                        return <Text key = {i}>{i}Nada</Text>
                    }
                  })
                }

Answer 1

我不明白为什么您的代码中有两个map。一个应该足够：

quotes.quotesArray.map((quote, i) => {
  if(quote.isSaved){
    return(                            
      <TouchableOpacity key={i} style = {styles.border}>
        <Text style = {styles.text}>
          i: {i}. {quote.preview}
        </Text>
      </TouchableOpacity> 
    )
  } else {
    return <Text key = {i}>{i}Nada</Text>
  }
});

这将通过引号循环，然后返回一个节点，或者是Quote.issaved是true或否。

，如果将其分配给新变量ex： var savedQuotes = ...或在渲染函数中使用它，则可以将它们保存到新数组：

中：

   render() {
     return (
       <View>
        {quotes.quotesArray.map...}
      </View>
     );
   }

map（）方法创建一个新数组，并带有调用的结果 在此数组中的每个元素上提供了功能。

这是更多信息：https：//developer.mozilla.org/en/docs/web/javascript/Reference/global_objects/array/aray/map

以下是React文档中的一些示例：https：//facebook.github.io/react/docs/lists-and-ykeys.html（应足够接近react-native）