时间戳

首页 > 解决方案 > 在提交调用 React 中的端点的表单时重新更新 UI 时遇到问题

javascript - 在提交调用 React 中的端点的表单时重新更新 UI 时遇到问题

问题描述

我正在从Express服务器获取中位素数。然后，我想更新数字以在前端检查其中值。function

但是，当我尝试UI在handleSubmit函数中获取端点并更新并使用更新状态时this.setState({ medianPrimeNumber: this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) })，我收到以下错误描述：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我提交表单时似乎this.state.medianPrimeNumber返回了一个。Promise我不知道如何解决这个问题：

import { React, Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      medianPrimeNumber: null,
      formValue: ''
    };

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(e) {
    this.setState({ formValue: e.target.value })
  }

  handleSubmit(e) {
    this.setState({ medianPrimeNumber: this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) })
    e.preventDefault()
  }

  componentDidMount() {
    this.fetchMedianPrimeNumber(17)
      .then(res => this.setState({ medianPrimeNumber: res.server
        }))
      .catch(err => console.log(err))
  }
    
  fetchMedianPrimeNumber = async (numberToCheck) => {
    const response = await fetch(`/median-prime-number/${numberToCheck}`)
    const body = await response.json()

    if (response.status !== 200) {
      throw Error(body.message) 
    }

    return body;
  };
  
  render() {
    return (
      <div className="App">
        <h1>Median Number Playground</h1>
        { this.state.formValue }
        <p className="App-intro">{ this.state.medianPrimeNumber}</p>
        <form onSubmit={this.handleSubmit}>
          <label>
            Enter number:
            <input type="text" value={this.state.formValue} onChange={this.handleChange} />
          </label>
      </form>
      </div>
    );
  }
}

export default App

formValue的状态更新正确

标签： javascriptnode.jsreactjsexpress

解决方案

你是对的，this.fetchMedianPrimeNumber(parseInt(this.state.formValue)) })确实回报了一个承诺。

您希望由于该承诺而返回的价值。换句话说，你想要await这个值，因为它是一个异步函数。IE：

  async handleSubmit(e) {
    const res = await this.fetchMedianPrimeNumber(parseInt(this.state.formValue))
    this.setState({ medianPrimeNumber: res })
    e.preventDefault()
  }

推荐阅读