javascript - 为什么我收到 Functions is not valid as a React child?

Question

这是 QuoteScreen 组件，有人可以告诉我为什么我收到 Functions is not valid 作为 React child 警告吗？

我知道这是一个警告，并且应用程序运行得很好。但这让我很恼火，我想去掉这个警告。请看看这里出了什么问题。

import {StyleSheet, Text, View} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import Greetings from './Greetings';

export default class QuoteScreen extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      quote: '',
    };
  }

  render() {
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 30,
      },
      alignRight: {
        textAlign: 'right',
      },
    });

    return (
      <View style={styles.container}>
        <Greetings name={this.state.name} />
        <Text>{this.state.quote.content}</Text>
        <Text style={styles.alignRight}>
          {this.state.quote.author ? ' - ' + this.state.quote.author : ''}
        </Text>
      </View>
    );
  }

  componentDidMount() {
    this.storeData();
    this.getData();
    this.fetchQuote().then(response => {
      this.setState({quote: response});
    });
  }

  storeData = async () => {
    try {
      await AsyncStorage.setItem('user_name', 'Simon Gomes');
    } catch (e) {
      // saving error
    }
  };
  getData = async () => {
    try {
      const value = await AsyncStorage.getItem('user_name');
      if (value !== null) {
        // value previously stored
        this.setState({name: value});
      }
    } catch (e) {
      // error reading value
    }
  };

  fetchQuote = async () => {
    try {
      let response = await fetch('https://api.quotable.io/random');
      let responseJson = await response.json();
      return responseJson;
    } catch (error) {
      console.error(error);
    }
  };
}

Answer 1

收到错误，它在greetings类中，您在渲染方法中使用了greet函数，这是不允许的，

const Greet = () => { let userTime = new Date().getHours(); if (userTime < 12) { return 'Good morning'; } else if (userTime < 18) { return 'Good afternoon'; } else { return 'Good evening'; } };

你必须像这样使用greet，

render() {
    return (
        <View>
            {this.Greet()}
        </View>
    )
}

and inside Greet function ,
you have to return strings as <Text>GoodMorning</Text> instead of just 'Good Morning'

希望对您有帮助，如有疑问请询问