ReactJS TypeError: Невозможно прочитать свойство 'setState' значения undefined даже после привязки в конструкторе, а также с помощью функции стрелки

Question

Я получаю сообщение об ошибке в строке 116

checked={this.setState({selectedOption: "Male"})}

Если я удалю эту строку, я получу ту же ошибку в следующей строке.

import React, { Component } from "react";
import { Document, Page } from "react-pdf";
import { pdfjs } from 'react-pdf';
import SplitPane, { Pane } from 'react-split-pane';
import { Button } from 'react-bootstrap';
import axios from 'axios';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export class TestPage extends React.Component{

    constructor(props){
      super(props);
      this.state = {
        numPages: null,
        pageNumber: 1,
        items: [],
        responses: [],
        color: '',
        name: "React",
        selectedOption: "Male",
      };
      this.onValueChange = this.onValueChange.bind(this);
      this.formSubmit = this.formSubmit.bind(this);
      this.goToPrevPage = this.goToPrevPage.bind(this);
      this.goToNextPage = this.goToNextPage.bind(this);
      this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);

    }

    componentDidMount(){
      axios.get("http://localhost:5000/getquestiondata")
        .then(
          (result) => {
            this.setState({
              items: result.data.number,
            });
        }).catch(error => {
          console.log("Error: ", error)
        })

    }

    onDocumentLoadSuccess = ({ numPages }) => {
      this.setState({ numPages: numPages });
    };


    formSubmit = event => {
      event.preventDefault();
      console.log(this.state.selectedOption);
    }

    onValueChange = event =>{
      this.setState({
        selectedOption: event.target.value
      });
    }

    goToPrevPage = () =>
      this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
    goToNextPage = () =>
      this.setState(state => ({ pageNumber: state.pageNumber + 1 }));

    render() {
      const { pageNumber, numPages, items } = this.state;
      var quesNos = [];
      // var resp = [];

      for(var i = 0; i < items; i++){
        quesNos.push(i);
        // resp.push(i);
      }

      console.log("QuesNos: ",quesNos);
      return (
        <div>
          <h1 style={{textAlign: "center"}}>Online Test #1</h1>
          <hr />
          <SplitPane
            split="vertical"
            sizes={[50,50]}
            defaultSize={parseInt(localStorage.getItem('splitPos'), 10)}
            onChange={size => localStorage.setItem('splitPos', size)}
            style={{overflow: 'scroll'}}
          >
            <div style={{overflowY: 'scroll', height:'100%', overflowX: 'scroll'}}>
              <nav>
                <button onClick={this.goToPrevPage}>Prev</button>
                <button onClick={this.goToNextPage}>Next</button>
              </nav>

              <div>
                <Document
                  file={require('./sample.pdf')}
                  onLoadSuccess={this.onDocumentLoadSuccess}
                >
                  <Page pageNumber={pageNumber}/>
                </Document>
              </div>

              <p>
                Page {pageNumber} of {numPages}
              </p>            
            </div>
            <div style={{overflowY: 'scroll', height:'100%', overflowX: 'scroll'}}>
              <form onSubmit={this.answerSubmit}>
                  {quesNos.map(function(qno){
                    return(                     
                      <div>
                        <div className="radio">
                          <label>
                            <input
                              type="radio"
                              value="Male"
                              checked={this.setState({selectedOption: "Male"})}
                              onChange={this.onValueChange}
                            />
                            Male
                          </label>
                        </div>
                        <div className="radio">
                          <label>
                            <input
                              type="radio"
                              value="Female"
                              checked={this.state.selectedOption === "Female"}
                              onChange={this.onValueChange}
                            />
                            Female
                          </label>
                        </div>
                        <div className="radio">
                          <label>
                            <input
                              type="radio"
                              value="Other"
                              checked={this.state.selectedOption === "Other"}
                              onChange={this.onValueChange}
                            />
                            Other
                          </label>
                        </div>
                        <div>
                          Selected option is : {this.state.selectedOption}
                        </div>
                        <Button variant="btn btn-primary" type="submit">Submit</Button>
                        </div>
                    );
                  })}
                <Button variant='primary' type="submit">Submit</Button>{' '}
              </form>            
            </div>
          </SplitPane>
        </div>
      );
  }
}

Есть идеи, почему эта ошибка бывает и как ее исправить? Спасибо!

Answer 1

Две ошибки в вашем коде

1. Ваша функция карты должна быть функцией стрелки для использования this класса / или вы используете .bind для функции карты
2. Вы не должны устанавливатьState непосредственно в рендере. Я предполагаю, что вы хотели сравнить состояние с проверенным атрибутом, например checked={this.state.selectedOption === "Male"}

Обновленный код ниже

{quesNos.map((qno) => { // arrow function here
         return(                     
          <div>
            <div className="radio">
              <label>
                <input
                  type="radio"
                  value="Male"
                  checked={this.state.selectedOption === "Male"} // Comparison here 
                  onChange={this.onValueChange}
                />
                Male
              </label>
            </div>
            <div className="radio">
              <label>
                <input
                  type="radio"
                  value="Female"
                  checked={this.state.selectedOption === "Female"}
                  onChange={this.onValueChange}
                />
                Female
              </label>
            </div>
            <div className="radio">
              <label>
                <input
                  type="radio"
                  value="Other"
                  checked={this.state.selectedOption === "Other"}
                  onChange={this.onValueChange}
                />
                Other
              </label>
            </div>
            <div>
              Selected option is : {this.state.selectedOption}
            </div>
            <Button variant="btn btn-primary" type="submit">Submit</Button>
            </div>
        );
      })}