试图设置字段的值，但是它不起作用

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>
    );
  }
}