为什么设置 this.setState 后 App.js 中的状态没有更新？答案

【问题标题】：Why the state is not updating in App.js after setting up this.setState?为什么设置 this.setState 后 App.js 中的状态没有更新？
【发布时间】：2020-10-22 00:37:17
【问题描述】：

这是我的简单待办事项应用程序，我只制作了一个组件，该组件接受输入表单用户并将该输入值传递给 App.js 以更新 App.js 状态中的项目。

todo-form.component.js

import React from 'react';


class SignInForm extends React.Component {
    constructor(){
        super();
        this.state ={
            temp: null
        };
}

    handleChange = (e) => {
        e.preventDefault();
        this.setState({
            temp: e.target.value
        },
        console.log(this.state)
        );
        // this.props.addInput(e.target.value);
    }

    handleSubmit= (e) => {
        e.preventDefault();
        console.log(this.state.temp);
        this.props.addInput(this.state.temp);

    }

    render(){
        return(
        <div className="container-form">
        <form onSubmit={this.handleSubmit}>
            <input 
            name="description" 
            type="text" 
            placeholder="add description"
            onChange={this.handleChange}
            value={this.state.input}
            />

            <button type="submit">ADD</button>
        </form>


        </div>

    );
}
}   


export default SignInForm;

App.js

import React from 'react';
import './App.css';
import SignInForm from './components/todo-form/todo-form.component'
import ItemList from './components/todo-list/todo-list.component';

class App extends React.Component {
  constructor(){
    super();

    this.state = {
        input: []
    };
}
  addInput = (item)  => {
    let newInput=[...this.state.input,item];
    console.log(newInput);
    this.setState = ({
      input: newInput
    },
    console.log(this.state)
    );

  }

  render(){
    return (
      <div className="App">
      <h1>TO-DO LIST</h1>
          <SignInForm addInput={this.addInput} />
      </div>
    );
  }

}

export default App;

在接受输入时，todo-form.component.js 中的状态正在更新为输入的输入值，但在 handleChangestate.temp /strong> 函数，调用 addInput 函数时，App.js 内部的状态不会更新。

请帮助我解决这个问题以及我的状态如何没有在 App.js 中更新？？

【问题讨论】：

你有没有尝试在构造函数和super中传递props

标签： javascript reactjs

【解决方案1】：

您的setState 是问题所在。看看我的代码。

App.js

class App extends React.Component {
  state = {
    input: [],
  };
  addInput = (item) => {
    let newInput = [...this.state.input, item];
    //setState should be this way
    this.setState({
      input: newInput,
    });
  };

  render() {
    return (
      <div className="App">
        <h1>TO-DO LIST</h1>
        {this.state.input.map((el) => (
          <li> {el}</li>
        ))}
        <SignInForm addInput={this.addInput} />
      </div>
    );
  }
}

export default App;

登录文件。

class SignInForm extends React.Component {
  // constructor(props) {
  // super(props);
  state = {
    temp: null,
  };
  // }

  handleChange = (e) => {
    e.preventDefault();
    this.setState({
      temp: e.target.value,
    });
    // this.props.addInput(e.target.value);
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.temp);
    this.props.addInput(this.state.temp);
  };

  render() {
    return (
      <div className="container-form">
        <form onSubmit={this.handleSubmit}>
          <input
            name="description"
            type="text"
            placeholder="add description"
            onChange={this.handleChange}
            value={this.state.input}
          />

          <button type="submit">ADD</button>
        </form>
      </div>
    );
  }
}

export default SignInForm;

【讨论】：