Почему в моем поле ввода текста / ввода ничего не отображается при вводе?

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

И searchResults:

this.setState({searchResults: response})