我想在单击提交按钮一次后控制台.log值并删除以前的映射项目，但它不起作用

Question

我对反应很陌生，我遇到了两个问题：

1. 我想console log输入并在单击提交按钮一次后显示映射数据。但是单击按钮两次后，我会在控制台上记录输入和映射数据。
2. 我想清除映射的列表(来自先前输入的数据(并根据输入显示新的列表项。但是，新列表项仅添加到上一个列表的末尾(只有上一个列表中的最后一个列表项被新列表的第一个列表项覆盖(。

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

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>
);
}
}

谁能帮忙？

Answer 1

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

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

2(在显示组件中，您使用的组件WillReciveProps生命周期和内部您的使用this.props.listdatafromparent指向以前的道具。与其使用this.props我建议考虑生命周期props参数，不如考虑它应该像

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

Answer 2

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

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

}(;

Answer 3

答案是：

1(回调函数应该用在setState上，以便在状态真正更新后做console.log。

在您的情况下，您调用setState并且setState是异步函数，这意味着console.log不会等到状态真正更新。

您的代码应该是：

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

2(我会将数据提取移出componentWillReceiveProps()，因为此生命周期方法将从版本17中弃用，并且每render()都会触发。 尝试替换为componentDidMount()或componentDidUpdate()。也许这个小小的改变就能解决你的问题。如果没有，请发布结果，我会再看看。