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

Question

这是我的前端

我得到的变量的值interestRate，并monthlyPayment从API。我只想在前端设置这些值。这是我的代码：

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正确处理错误。你不是唯一一个，fetchAPI 有一个设计缺陷，鼓励这种脚步，我写在这里。）更多关于在文档中处理状态的信息。看评论：class Display extends Component {&nbsp; constructor(props) { // *** Constructor with initial state&nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; interestRate: 0,&nbsp; // *** Use appropriate initial values, 0 probably isn't the right choice&nbsp; &nbsp; &nbsp; &nbsp; monthlyPayment: 0&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; // *** SOMETHING needs to call this function. You might do it from componentDidMount, for instance.&nbsp; calculateAPR = () => {&nbsp; &nbsp; let x = JSON.parse(localStorage.getItem('amount'));&nbsp; &nbsp; a=x[0].amount;&nbsp;&nbsp; &nbsp; t=x[0].years;&nbsp; &nbsp; fetch("https://ftl-frontend-test.herokuapp.com/interest?amount="+a+"&numMonths="+t)&nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//&nbsp; &nbsp; &nbsp; &nbsp; if (!res.ok) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// *** Note the necessary error handling&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; throw new Error("HTTP error " + res.status); //&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; return res.json();&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .then(&nbsp; &nbsp; &nbsp; &nbsp; (result) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; interestRate: result.interestRate,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; monthlyPayment: result.monthlyPayment.amount&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; .catch(err => {&nbsp; &nbsp; &nbsp; &nbsp; // *** Handle/display error here&nbsp; &nbsp; &nbsp; });&nbsp; };&nbsp; // *** You can have these as functions if you want, but since they're pure functions&nbsp; // it A) Isn't necessary to re-create them for every instance like this, and B) Is&nbsp; // entirely possible for them to be `static` (or even outside the component and closed&nbsp; // over).&nbsp; calculateMonthlyRepayment = (z) => {&nbsp; &nbsp; return <p>${z}</p>;&nbsp; };&nbsp; percentageAPR = (z) => {&nbsp; &nbsp; return <p>{z * 100}%</p>;&nbsp; };&nbsp; render() {&nbsp; &nbsp; // *** You may want logic here to render differently when you don't have the data yet&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="flex">&nbsp; &nbsp; &nbsp; &nbsp; <DisplayChild func={this.percentageAPR()} text="interest rate" />&nbsp; &nbsp; &nbsp; &nbsp; <DisplayChild&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; func={this.calculateMonthlyRepayment()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text=" monthly repayment"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}