自定义函数不在 React Native 上呈现

Question

我正在做一个 React Native 项目，我在 javascript 中有一个对象，其中包含一堆不同的类别，以及该类别下的项目。我还有一个函数 (renderButtons()) 应该渲染它们，映射对象，以便每个项目都显示为各自类别下的按钮。但是，出于某种原因，此功能没有在页面上显示任何内容。

当我使用 alert 而不是 <Text> 或 <Button> 时，函数调用完美，并获得了我想要的所有值，但它不会实际显示在页面上。页面上的其他所有内容都完美呈现，那么我做错了什么？

我的屏幕 .js 代码如下（为清楚起见省略了一些部分）：

import React, {useState, useEffect} from 'react';
import { View, Text, Button, Alert, Modal, Pressable } from 'react-native';
import { globalStyles } from './styles/global';

export default function IngredientScreen({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    var ingredientList = [
        {
            category: "Cooking & Baking Ingredients",
            items: ["Flour"]
        },
        {
            category: "Dips & Spreads",
            items: ["Cream Cheese"]
        },
        {
            category: "Fresh & Frozen Fruits",
            items: ["Passion Fruit", "Apples"]
        },
        {
            category: "Grains, Rice & Cereal",
            items: ["Millet"]
        },
    ];
    
    function renderButtons() {
        return ingredientList.map(buttonInfo => (
            <Text style={globalStyles.h2}>{buttonInfo.category}</Text>,
            buttonInfo.items.forEach(item => {
                <Button style={globalStyles.buttonOpen}>{item}</Button>
            })
        ));
    };


    return (
      <View style={globalStyles.container}>
        <Text style={globalStyles.h1}>Your Ingredients</Text>
        <View>
          {renderButtons()}
        </View>
      </View>
    );
  };

Answer 1

请尝试以下方法：

{this.renderButtons()}

调用一个函数，你要加上这个。带功能。希望这有效。

如果它不起作用，请发表评论，我会帮助解决这个问题。

Answer 2

renderButtons 函数有一些问题：

按钮需要道具 title，而不是 children。检查：https://reactnative.dev/docs/button
buttonInfo.items.forEach 永远不会 return 列出一个组件，因为 forEach 只是迭代项目但不会 return 任何东西，所以你需要在这里使用 map 函数，并且还在 { buttonInfo.items.map(...) }

{}

在下面的这段代码中，您没有 returning 任何东西，但即使重新调整，它也需要一个映射，而不是我上面所说的 forEach。

     buttonInfo.items.forEach(item => {
        <Button style={globalStyles.buttonOpen}>{item}</Button>
     })

当组件未包含在视图或片段中时，您不能 return 两个组件 <></> 需要在这里添加一个片段：

       <>
            <component1 />
            <component2 />
       </>

需要在 </Text>,

,

这是解决了上述问题的代码示例（为简单起见删除了样式）：

https://snack.expo.dev/@ronicesarrc/73868c

import React, {useState, useEffect} from 'react';
import { View, Text, Button, Alert, Modal, Pressable } from 'react-native';

export default function IngredientScreen({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    let ingredientList = [
        {
            category: "Cooking & Baking Ingredients",
            items: ["Flour"]
        },
        {
            category: "Dips & Spreads",
            items: ["Cream Cheese"]
        },
        {
            category: "Fresh & Frozen Fruits",
            items: ["Passion Fruit", "Apples"]
        },
        {
            category: "Grains, Rice & Cereal",
            items: ["Millet"]
        },
    ];
    
    function renderButtons() {
        return ingredientList.map(buttonInfo => (
          <>
            <Text >{buttonInfo.category}</Text>
            {buttonInfo.items.map(item => {
                return <Button title={item} />
            })}
          </>
        ));
    }


    return (
      <View>
        <Text >Your Ingredients</Text>
        <View>
          {renderButtons()}
        </View>
      </View>
    );
  };

自定义函数不在 React Native 上呈现

Custom function not rendering on React Native

javascript

reactjs

react-native

rendering