Reactjs 我想要console.log在点击提交按钮一次后的值并删除之前的映射项，但它不起作用

我是个新手，我有两个问题：

单击一次提交按钮后，我想

控制台记录输入并显示映射数据。但我在点击两次按钮后，控制台记录了输入和映射数据

我想清除映射列表（来自以前输入的数据），并根据输入显示新的列表项。但新列表项仅添加到上一个列表的末尾（只有上一个列表中的最后一个列表项被新列表的第一个列表项覆盖）

这是我的应用程序组件中的代码：

import React, { Component, Fragment } from 'react';
import './App.css';
import Display from './/Display';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      passedValue: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    this.setState({ passedValue: this.state.value });
    console.log(this.state.passedValue);
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <form className="inputContainer" onSubmit={this.handleSubmit}>
          <input type="text" name="company_name" onChange={this.handleChange} />
          <input type="submit" value="Submit" />
        </form>
        <Display listDataFromParent={this.state.passedValue} />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react'
import "./Display.css";

export default class Display extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      data: []
    };
  }

  componentWillReceiveProps() {
    fetch("http://localhost:5000/company?company_name=" + this.props.listDataFromParent)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            data: result
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }
  render() {
    const { error, isLoaded, data } = this.state;
    // if (error) {
    //   return <div>Error: {error.message}</div>;
    // } else if (!isLoaded) {
    //   return <div>Loading...</div>;
    // } else {
    return (
      <div className="display">
        <h1>Kreditnehmer</h1>
        <ul>
          {this.props.listDataFromParent}

          {data.map(item => (
            <li key={item.c.company_id}>
              Relation type: {item.r.relation_group}
              Last name: {item.p.last_name}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

import React，{Component，Fragment}来自'React'；
导入“/App.css”；
从“//Display”导入显示；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
passedValue:“
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
this.setState（{passedValue:this.state.value}）；
console.log（this.state.passedValue）；
event.preventDefault（）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

这是我的显示组件：

import React, { Component, Fragment } from 'react';
import './App.css';
import Display from './/Display';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      passedValue: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    this.setState({ passedValue: this.state.value });
    console.log(this.state.passedValue);
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <form className="inputContainer" onSubmit={this.handleSubmit}>
          <input type="text" name="company_name" onChange={this.handleChange} />
          <input type="submit" value="Submit" />
        </form>
        <Display listDataFromParent={this.state.passedValue} />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react'
import "./Display.css";

export default class Display extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      data: []
    };
  }

  componentWillReceiveProps() {
    fetch("http://localhost:5000/company?company_name=" + this.props.listDataFromParent)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            data: result
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }
  render() {
    const { error, isLoaded, data } = this.state;
    // if (error) {
    //   return <div>Error: {error.message}</div>;
    // } else if (!isLoaded) {
    //   return <div>Loading...</div>;
    // } else {
    return (
      <div className="display">
        <h1>Kreditnehmer</h1>
        <ul>
          {this.props.listDataFromParent}

          {data.map(item => (
            <li key={item.c.company_id}>
              Relation type: {item.r.relation_group}
              Last name: {item.p.last_name}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

import React，{Component}来自“React”
导入“/Display.css”；
导出默认类显示扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
数据：[]
};
}
组件将接收道具（）{
取回（“http://localhost:5000/company?company_name=“+this.props.listDataFromParent）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
数据：结果
});
},
//注意：这里处理错误很重要
//而不是一个catch（）块，这样我们就不会吞咽
//组件中实际错误的例外情况。
（错误）=>{
这是我的国家({
isLoaded：是的，
错误
});
}
)
}
render（）{
const{error，isLoaded，data}=this.state；
//如果（错误）{
//返回错误：{Error.message}；
//}如果（！isLoaded），则为else{
//返回装载。。。；
//}其他{
返回(
克雷迪特纳

{this.props.listDataFromParent}
{data.map（项=>(

关系类型：{item.r.relationship_group}
姓氏：{item.p.Last_name}

))}

);
}
}

有人能帮忙吗？

答案如下：

1） 回调函数应该在

setState

上使用，以便在状态真正更新后执行

console.log

在您的例子中，您调用

setState

，

setState

是async函数，这意味着

console.log

不会等待状态真正更新

您的代码应该是：

handleSubmit(event) {
    this.setState({ passedValue: this.state.value }, 
                  () => console.log(this.state.passedValue));
    event.preventDefault();
  } 

2） 我将从

componentWillReceiveProps（）

中取出数据，因为此生命周期方法将从版本17中弃用，并且在每个

render（）

中都会触发。请尝试用

componentDidMount（）

或

componentdiddupdate（）替换

。也许这小小的改变就能解决您的问题。如果没有，请发布结果，我会再看一看。

1）

setState

是react中的

async

方法，意味着需要一些时间来更新组件状态。您可以使用setState的回调函数获取控制台日志，如

this.setstate({ value: e.target.value }, ()  => {  console.log(this.state.value) });

2）在显示组件中，您使用的组件将支持生命周期，在内部使用您的“代码>”。

componentWillReciveProps(props) {
// your code
Console.log(props.listdatafromparent);
}

---

handleSubmit方法错误…控制台日志在状态更改之前执行。您需要将其作为setState的第二个参数放入回调函数中

this.setState({ passedValue: this.state.value }, () => {
console.log(this.state.passedValue);

}))