时间戳

首页 > 解决方案 > ReactJS - setState() 没有更新

reactjs - ReactJS - setState() 没有更新

问题描述

我有一个单页 create-react-app 项目，我遇到的问题是状态没有更新。我已经删掉了一些代码，只是为了让这个例子更短一些，更容易理解。调用 setState() 的函数在 form_change() 中。

我的目标是在出现错误时更改文本的颜色，但即使 {this.state.test} 也没有更新。我尝试将 console.log()s 放在不同的位置来绕过 setState 的异步特性，但不幸的是，它们似乎表明状态永远不会更新。自从我使用 React 已经有一段时间了，所以我有机会做一些非常愚蠢的事情！

在此先感谢您的帮助。

这是我的代码：

import React,{Component} from 'react'; 
import './App.css';
import Dropdown from 'react-dropdown'
import classes from './classes.module.css'
import firebase from 'firebase';
import 'react-dropdown/style.css';
const axios = require('axios');

class App extends Component {
  render(){

  const error_empty = (param)=>{
    if (this.state.error===undefined){
      return false
    }
    else{
      
      if (this.state.errors.find(el => el === param) === undefined){
        return false
      }
      else return true


    }
  }

  const form_change = (event, param)=>{
    
    let form={...this.state.form};
    form[param]=event.target.value;

    let errors =verified(form);
  
  console.log(form); //as expected
  console.log(errors); //as expected
 
 //works up til here. setState not updating for some reason.
 this.setState({form:form,errors:errors,test:'Hello World'})


    
    
  }
const verified = (data)=>{
  let errors = [];
  let form = data;

errors.push('ean')
return errors}

  this.state = {
    example:['abc'],
    form:{
      example:"abc"
    }
  }


  return (

    <div className="App">
      <header className="App-header">
        <div className={classes.button_holder}>
        <div className={classes.page_button} onClick={()=>{null}}>
              {this.state.test}
        </div>
        </div>
        <div className={classes.user_form}>User Update Form
        <div>
        <input className={classes.input_text} style={{color: error_empty()?'red':'black'}} value={this.state.form.ean} onChange={(event)=>{form_change(event,'ean')}} placeholder={"EAN"}></input>
        </div>
          </div>
    
      
      </header>

    </div>
  );
}
}

export default App;

标签： reactjssetstate

解决方案

  1. 在构造函数中初始化你的状态
  2. 不要在渲染中更新你的状态（this.setState），因为这会导致不定式循环。
  3. 将您的函数 error_empty()、form_change() 和 verify() 移到渲染之外。
  4. 调用函数 onChange 使用this

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      example:['abc'],
      form:{
        example:"abc"
      }
      error: ""
    }
  }

  error_empty = (param) => {
    if(this.state.error===undefined) {
      return false
    }
    else {
      if(this.state.errors.find(el => el === param) === undefined) {
        return false  
       }
      return true
    }
   }

  ...
    
      render() {
        ...
        <input ... onChange={(event) => {this.form_change(event,'ean')}}/>
        ...
      }
    }

推荐阅读