Я не могу получить доступ к состоянию или setState

Я хочу обновить массив state.messages с помощью метода readFromFile, который вызывает ошибку Невозможно прочитать свойство setState из undefined. Но я зарегистрировал this в этом методе, где я могу увидеть state. Что мне не хватает?

Кроме того, я хочу добавить объект в this.state.messages из метода readFromFile (когда я получаю ответ от API). Как я могу это сделать?

Я искал решение, и все, что я нашел, это проблема с привязкой (что я и сделал)

class Main extends Component {

  constructor() {
    super();
    this.readFromFile = this.readFromFile.bind(this);
    // this.readFromFile = this.readFromFile.bind(this);
  }

  state = {
    count: 0,
    messages: [{type: 'sent', content: "test1"}, {type: 'received', content: "test2"}],
    inputText: ''
  };

  render() {
    return(
      <React.Fragment>
        <span>{ this.renderMessage() }</span>
        <input type = "text" value = {this.state.inputText} onChange = {this.handleTextInput} />
        <button onClick = {this.handleSendClick}>Send</button>
      </React.Fragment>
    );
  }

  handleTextInput = (event) => {
    this.setState({inputText: event.target.value});
  }

  handleSendClick = () => {
    console.info(this);
    if (this.state.inputText === "read") {
      this.readFromFile();
      // this log works fine
      console.info(this.state.messages);
    }

    // const { count } = this.state;
    // return count === 0 ? <h1>Zero</h1> : count;
  }

  readFromFile = () => {
    console.info(this);
    fetch('http://localhost:8000/read')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.info(myJson.content);
        // update NOT WORKING
        // this.setState({messages: this.state.messages.concat({content: myJson.content, type: 'received'})})
        // this log gives TypeError: Cannot read property 'state' of undefined
        // console.info(this.state.messages);
      });
  }

  renderMessage() {
    if (this.state.messages.length === 0) return <p>No message found!</p>;
    return <ul>{this.state.messages.map((msg, idx) => <li key = {idx}>{msg.content}</li>)}</ul>;
  }

}

export default Main;