Question

我只有一个页面create-react-app项目，而我遇到的问题是状态未更新。我删除了一些代码，只是为了使示例更短并且更容易理解。调用setState（）的函数在form_change（）中。

我的目标是在出现错误时更改文本的颜色，但即使{this.state.test}也没有更新。我尝试将console.log（）放置在不同的位置，以避开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;

Answer 1

将状态初始化移至呈现函数this.state之外。

Answer 2

在构造函数中初始化状态
请勿在渲染中更新您的状态（this.setState），因为这将导致无限循环。
将函数error_empty（），form_change（）和verify（）移到渲染器外部。
要调用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')}}/>
        ...
      }
    }

ReactJS-setState（）未更新

2 个答案: