react native：函数作为 react child 无效。如果您返回组件而不是 <component/> ，则可能会发生这种情况答案

【问题标题】：react native: functions are not valid as a react child .This may happen if you return a component instead of a <component/>react native：函数作为 react child 无效。如果您返回组件而不是 <component/> ，则可能会发生这种情况
【发布时间】：2019-12-02 20:19:44
【问题描述】：

import React, { useState } from "react";
import { StyleSheet, Text, View, Button, TextInput } from "react-native";

export default function App() {
  const [enteredGoal, setEnteredGoal] = useState("");

  const [courseGoals, setCourseGoals] = useState([]);

  const goalInputHandler = enteredText => {
    setEnteredGoal(enteredText);
  };

  const addGoalHandler = () => {
    //console.log(enteredGoal);

    setCourseGoals(currentGoals => [...currentGoals, enteredGoal]);
  };
  return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Course Goal"
          style={styles.input}
          onChangeText={goalInputHandler}
          value={enteredGoal}
        />
        <Button title="Add" onPress={addGoalHandler} />
      </View>
      <View>{(courseGoals.map = goal => <Text key={goal}>{goal}</Text>)}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    padding: 50
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },

  input: {
    width: "70%",
    borderBottomColor: "black",
    borderWidth: 1,
    padding: 10
  }
});

请我一个多星期以来一直在与这个错误作斗争。任何帮助将不胜感激。我实际上正在学习使用 expo 在 youtube 上构建反应原生应用程序的教程。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

问题是您的map 电话，将其更改为：

<View>{courseGoals.map(goal => <Text key={goal}>{goal}</Text>)}</View>

否则你正在尝试重新定义courseGoals.map。

【讨论】：

【解决方案2】：

不是 100% 确定问题是什么，但是

<View>{(courseGoals.map = goal => <Text key={goal}>{goal}</Text>)}</View>

应该是这样的

<View>{courseGoals.map(goal => <Text key={goal}>{goal}</Text>)}</View>

【讨论】：

非常感谢，在您为我提供的帮助下，我让它运行起来了，哈哈。谢谢兄弟