setState之后，react中的输入搜索为空

Question

如果我在搜索字段中输入了一些字母，我想进行查询。 但是，如果我调用setState，则输入字段始终设置为空。 感谢您的帮助。xxxxxxxxxxxxxxxxxxxxxxxx

constructor() {
super();
this.state = {
  isFetching: false,
  user: []

};

this.suche = this.suche.bind(this);
}

async suche(e) {
const name = e.target.value;

const ergebnis = await axios
  .get("http://HOST:PORT/BACKEND/SERVLET?Param1")
  .then(res => {
    const user = res.data;
    this.setState({ user });
  });
}

render() {
return (
  <Col md="4">
    <label
      className="field a-field a-field_a2"
      style={{ width: "100%", marginBottom: "10%" }}
    >
      <input
        className="field__input a-field__input"
        placeholder="z.B. Hans"
        required
        onChange={this.suche}           
      />
      <span className="a-field__label-wrap">
        <span className="a-field__label">Name</span>
      </span>
    </label>
  </Col>
);
}

这是我的用户数组

Answer 1

user保存与查询匹配的用户列表，因此您需要一个附加状态值。我们称它为query，然后在输入更改时更新query，并在成功调用API时更新user列表。

this.state = {
  isFetching: false,
  user: [],
  query: ""
};

async suche(e) {
const name = e.target.value;
this.setState({ query: name });
const ergebnis = await axios
  .get("http://HOST:PORT/BACKEND/SERVLET?Param1")
  .then(res => {
    const user = res.data;
    this.setState({ user });
  });
}

并显示在输入字段中输入的值：

<input
  className="field__input a-field__input"
  placeholder="z.B. Hans"
  required
  onChange={this.suche}
  value={this.state.query}           
/>