我想在单击提交按钮一次后使用 console.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应该使用回调函数，以便在 state 真正更新后执行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()替换。 也许只是这个小小的改变就能解决你的问题。 如果没有，请发布结果，我会再看看。

Answer 2

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

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

2) 在显示组件中，你使用 componentWillReciveProps 生命周期，在里面你使用this.props.listdatafromparent ，它指向以前的道具。 而不是使用this.props我建议考虑生命周期的props参数，意味着它应该像

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

Answer 3

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

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

});