为什么在我键入时我的 React 文本/输入字段中没有出现任何内容？

Question

我正在使用 React 16.13.0。我想构建一个简单的搜索组件，在用户输入时进行搜索。我已经创建了 ./src/components/Search.jsx

import React, { Component } from "react";

export default class Search extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchTerm: "",
            setSearchTerm: "",
            searchResults: [],
            setSearchResults: []
        }
        this.handleChange = this.handleChange.bind(this);

    }

    handleChange(event) {
        console.log("value:" + event.target.value);
        this.state.searchTerm = event.target.value;
        fetch('/coops/?contains=' + encodeURIComponent(this.state.searchTerm),{
            method: "GET",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
        }).then(response => {
            this.state.searchResults = response;
        });
    }

    render() {
        return (
            <div className="searchForm">
                <input
                    type="text"
                    placeholder="Search"
                    value={this.state.searchTerm}
                    onChange={this.handleChange}
                />
                <ul>
                    {this.state.searchResults.map(item => (
                    <li>{item}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

我遇到的问题是在渲染组件之后，当我键入时，搜索框中没有任何内容。我确实看到针对端点执行的请求，每个请求都包含我要输入的字母。任何有关如何在我键入时将整个搜索词保留在文本字段中的帮助表示赞赏。

Answer 1

替换这个：

this.state.searchTerm = event.target.value;

用这个：

this.setState({searchTerm: event.target.value})

然后搜索结果：

this.setState({searchResults: response})