javascript - 如何在函数内返回一个函数并在返回时显示它

Question

这是我的状态

    constructor(props) {
    super(props);
    this.state = {
        fToC: '',

这是我的功能

    handleChange = async (value) => {
    this.setState({ value });
    await Axios.get(`http://dataservice.accuweather.com/`).then((res) => {
        this.setState({ weather: res.data });

        console.log('weather_Temperature:' + this.state.weather.DailyForecasts[0].Temperature.Maximum.Value);

  >>>>>> function FToC(fahrenheit) { <<<<<<<<<<<<<<< 
            let fTemp = fahrenheit;
            let fToCel = (fTemp - 32) * 5 / 9;
            let message = fTemp + '\xB0F is ' + fToCel + '\xB0C.';
            console.log('message' + message);
        } FToC(this.state.weather.DailyForecasts[0].Temperature.Maximum.Value);
        this.setState({ FToC }) 

这里我想返回函数的结果

        <p class="card-text">{this.state.FToC}</p> 

错误:

警告:函数作为 React 子项无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。

Answer 1

所以问题是你正在尝试渲染一个设置为状态的函数

您需要从 FToC 函数返回一个值，然后在 setState 方法中调用它

setState({fToC: FToC(this.state.weather.DailyForecasts[0].Temperature.Maximum.Value))

顺便说一句，this.setState({ FToC }) 在你的状态中创建另一个字段 (FToC)，你已经有了 fToC

下面的代码应该运行良好

handleChange = async (value) => {
    this.setState({ value });
    await Axios.get(`http://dataservice.accuweather.com/`).then((res) => {
        this.setState({ weather: res.data });

        console.log('weather_Temperature:' + this.state.weather.DailyForecasts[0].Temperature.Maximum.Value);

  function FToC(fahrenheit) {
            let fTemp = fahrenheit;
            let fToCel = (fTemp - 32) * 5 / 9;
            let message = fTemp + '\xB0F is ' + fToCel + '\xB0C.';
            return message;
        } ;
        this.setState({ fToC: FToC(this.state.weather.DailyForecasts[0].Temperature.Maximum.Value) }) ```