javascript - 试图设置字段的值但它不起作用

Question

这是我的前端

我从 API 获取变量 interestRate 和 monthlyPayment 的值。我只想在前端设置这些值。这是我的代码:

class Display extends Component {
componentDidMount() {
    this.calculateAPR();
  }

  componentDidUpdate(prevProps) {
      this.calculateAPR();

    }

  calculateAPR = () => {
    let x = JSON.parse(localStorage.getItem('amount'));
     a=x[0].amount; 
     t=x[0].years;


    fetch("https://herokuapp.com/interest?amount="+a+"&numMonths="+t)
      .then(res => res.json())
      .then(

        (result) => {
          //console.log(result);
          interestRate = result.interestRate;
          monthlyPayment = result.monthlyPayment.amount;
          console.log(interestRate, monthlyPayment);
        },
      )

        this.calculateMonthlyRepayment(monthlyPayment);
        this.percentageAPR(interestRate);
  };

  calculateMonthlyRepayment = (z) => {
    return <p>${z}</p>;
  };

  percentageAPR = (z) => {
    return <p>{z * 100}%</p>;
  };

  render() {
    return (
      <div className="flex">
        <DisplayChild func={this.percentageAPR()} text="interest rate" />
        <DisplayChild
          func={this.calculateMonthlyRepayment()}
          text=" monthly repayment"
        />
      </div>
    );
  }
}

这是我显示这些值的地方，但没有显示这些值:

const DisplayChild = ({ func, text }) => {
  return (
    <span>
      {func} <small>{text}</small>
    </span>
  );
};

Answer 1

您需要将值存储在状态信息中。事实上，您只是将它们传递给函数，这些函数会立即返回元素，然后将这些元素丢弃。 (你也没有正确处理来自 fetch 的错误。你不是唯一的，fetch API 有一个设计缺陷，鼓励这种脚枪，我已经写了它向上 here .)

关于处理状态的更多信息 in the documentation .

查看评论:

class Display extends Component {
  constructor(props) { // *** Constructor with initial state
      super(props);
      this.state = {
        interestRate: 0,  // *** Use appropriate initial values, 0 probably isn't the right choice
        monthlyPayment: 0
      });
  }

  // *** SOMETHING needs to call this function. You might do it from componentDidMount, for instance.
  calculateAPR = () => {
    let x = JSON.parse(localStorage.getItem('amount'));
    a=x[0].amount; 
    t=x[0].years;

    fetch("https://ftl-frontend-test.herokuapp.com/interest?amount="+a+"&numMonths="+t)
      .then(res => {                                   //
        if (!res.ok) {                                 // *** Note the necessary error handling
          throw new Error("HTTP error " + res.status); //
        }                                              //
        return res.json();
      })
      .then(
        (result) => {
          this.setState({
            interestRate: result.interestRate,
            monthlyPayment: result.monthlyPayment.amount
          });
        },
      )
      .catch(err => {
        // *** Handle/display error here
      });
  };

  // *** You can have these as functions if you want, but since they're pure functions
  // it A) Isn't necessary to re-create them for every instance like this, and B) Is
  // entirely possible for them to be `static` (or even outside the component and closed
  // over).
  calculateMonthlyRepayment = (z) => {
    return <p>${z}</p>;
  };

  percentageAPR = (z) => {
    return <p>{z * 100}%</p>;
  };

  render() {
    // *** You may want logic here to render differently when you don't have the data yet
    return (
      <div className="flex">
        <DisplayChild func={this.percentageAPR()} text="interest rate" />
        <DisplayChild
          func={this.calculateMonthlyRepayment()}
          text=" monthly repayment"
        />
      </div>
    );
  }
}