Question

这是QuoteScreen组件，有人可以告诉我为什么我得到的功能不能作为React子警告使用吗？

我了解这是一个警告，并且应用程序运行得很好。但这让我很烦，我想摆脱警告。请看看这里出了什么问题。

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类中，您已在render方法中使用了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 like

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

并在Greet函数中，
您必须以<Text>GoodMorning</Text>的形式返回字符串，而不仅仅是'Good Morning'

希望有帮助，请问是否有任何疑问

为什么我得到的功能作为React子代无效？

1 个答案: