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

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 {

  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>

    );

  }

}