reactjs - 反应错误的数字运算结果

Question

我是 React 的新手，我正在使用一个简单的应用程序，我需要读取一些数字并使用它们进行操作。问题是我总是得到奇怪的结果。例如，调试我得到：

CALCULANDO 8 * 4 = 64
CALCULANDO 8 * 2 = 64
CALCULANDO 8 * 23 = 64
CALCULANDO 1 * 23 = 1
CALCULANDO 1 * 2 = 1
CALCULANDO 12 * 2 = 144
CALCULANDO 1 * 2 = 1
CALCULANDO 1 * 2 = 1

查看输出，我假设 te 值已被很好地读取，并且我检查了我是否等待 setState 完成，但我无法找出问题所在。完整的代码是：

import Distribution from './Distribution';
import React, {Component} from 'react'; 
import NumberField from '../Components/NumberField';

class Binomial extends Component {
    constructor (props) {
      super(props);
      this.changeN = this.changeN.bind(this);
      this.changeP = this.changeP.bind(this);

      this.state={
        name: "Binomial",
        p: 0,
        n: 0,
        media: 0,
        varianza: 0
      }
    }

    calcularTodo(){
      this.calcularMedia();
      this.calcularVarianza();
    }

    calcularMedia(){
      if(this.state.p === 0|| this.state.n === 0)
        this.setState({media: 0})

      else{
        let result = Number(this.state.n) * Number(this.state.n); 
        console.log("CALCULANDO " + this.state.n + " * " + this.state.p + " = " + result)

        this.setState({media: result})
      }
    }

    calcularVarianza(){
      this.setState({varianza: 2})
    }

    render(){
      return(
        <div>
          <NumberField label={"p"} handleChange={this.changeP}/>
          <NumberField label={"n"} handleChange={this.changeN}/>
          <Distribution name={this.state.name} media={this.state.media} varianza={this.state.varianza}/>
        </div>
      )
    }

    changeP = async function (event){
      await this.setState({p: Number(event.target.value)});
      this.calcularTodo();
    }

    changeN = async function (event){
      await this.setState({n: Number(event.target.value)});
      this.calcularTodo();
    }
}

export default Binomial;

其他模块是：

import React, {useState, Component} from 'react';
import {TextField} from "@material-ui/core";


class NumberField extends Component{
    
    render(){ 
        return (
        <TextField
          label="None"
          id="margin-none"
          label={this.props.label}
          variant="outlined"
          type={Number}
          onChange={this.props.handleChange}
        />
        )
    }
}

export default NumberField;

和

import React, {Component} from 'react'; 
import {Table} from '../Components/Table'
import NumberField from '../Components/NumberField'


class Distribution extends Component{
 
  constructor () {
    super();
  }

  render(){
    
    return(
      <div> 
      <this.props.name/>
      <Table _media={this.props.media} _varianza={this.props.varianza}/>
      </div>
    )
  }

}

export default Distribution;

我很感激任何帮助。谢谢。

标签： reactjsvisual-studio-codeoperators

Answer 1

再看一遍我认为石板状态不是问题，问题是您正在尝试计算依赖于其他人的值并立即更新它们，因为反应批次状态更新它将采用以前的值进行计算。您可以通过两种方式解决它，创建更新程序功能或使用componentDidUpdate

更新函数

class Binomial extends Component {
  ...

  updateState(updates) {
    this.setState(prevState => {
      const newState = { ...prevState, ...updates };
      return {
        ...newState,
        media: this.calcularMedia(newState),
        varianza: this.calcularVarianza(),
      };
    });
  }

  calcularMedia(state) {
    if (state.p === 0 || state.n === 0) return 0;

    let result = Number(state.n) * Number(state.n);
    console.log('CALCULANDO ' + state.n + ' * ' + state.p + ' = ' + result);

    return result;
  }

  calcularVarianza() {
    return 2;
  }

  render() {
    ...
  }

  changeP = async function(event) {
    await this.updateState({ p: Number(event.target.value) });
  };

  changeN = async function(event) {
    await this.updateState({ n: Number(event.target.value) });
  };
}

组件DidUpdate

class Binomial extends Component {
  ...

  componentDidUpdate(_prevProps, prevState) {
    if (prevState.p !== this.state.p || prevState.n !== this.state.n) {
      this.calcularTodo();
    }
  }

  calcularTodo() {
    this.calcularMedia();
    this.calcularVarianza();
  }

  calcularMedia() {
    if (this.state.p === 0 || this.state.n === 0) this.setState({ media: 0 });
    else {
      let result = Number(this.state.n) * Number(this.state.n);
      console.log('CALCULANDO ' + this.state.n + ' * ' + this.state.p + ' = ' + result);

      this.setState({ media: result });
    }
  }

  calcularVarianza() {
    this.setState({ varianza: 2 });
  }

  render() {
    ...
  }

  changeP = async function(event) {
    await this.setState({ p: Number(event.target.value) });
  };

  changeN = async function(event) {
    await this.setState({ n: Number(event.target.value) });
  };
}