Ошибка типа: this.setState не является функцией

Question

Это мой код:

const cookies = new Cookies();
var name = (cookies.get('name'));
var key = (cookies.get('key'));
console.log(key);
const theme = createMuiTheme({
  palette: {
    primary: amber,
    secondary: blue
  },
  root: {
    flexGrow: 1,
  },
  bottomView: {

    width: '25%',
    height: 50,
    backgroundColor: '#FF9800',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: 0
  },
});
class Base {
  constructor() {}
}

class Homework extends Base {
  constructor() {
    super();

    this.state = {
      topicBox: null,
      payloadBox: null
    };

    this.publish = this.publish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
 publish(event) {
    this.setState({value: event.target.value});
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  } 


  async loadTest() {
    try {
      //grab courses
      const response = await fetch('https://classroom.googleapis.com/v1/courses?access_token=' + key);
      const json = await response.json();
      //coursemax vars will eventually be user defined
      var coursemax = [2, 2, 2, 2, 2, 2, 2, 2];

      if (json.courses != null) {
        for (var course = 0; course < json.courses.length && course < 9; course++) {
          //grab course info
          var coursework = await fetch('https://classroom.googleapis.com/v1/courses/' + json.courses[course].id + '/courseWork?access_token=' + key);
          var coursejson = await coursework.json();
          console.log(coursejson);
          var assignment = "";
          for (var assignmentnum in coursejson.courseWork) {
            if (assignmentnum <= coursemax[course] - 1) {
              //add in assignment
              assignment += "<p>" + coursejson.courseWork[assignmentnum].title + "</p>";
              //"Due: "+coursejson.courseWork[assignmentnum].dueDate.month+"/"+coursejson.courseWork[assignmentnum].dueDate.day
            }
          }
          //making ids to render
          document.getElementById('class' + (course + 1) + 'info').innerHTML = assignment;
          document.getElementById('class' + (course + 1)).innerHTML = json.courses[course].name + '</b>' + ':' + '<br/>';;
        }
      }
    } catch (err) {
      console.log(err);
    }
  }
}
var app = new Homework();
var config = {
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx"
};
firebase.initializeApp(config);
app.loadTest();

function publish() {
  console.log(this.state.topicBox, this.state.payloadBox);
  const itemsRef = firebase.database().ref('Users');
  const item = {
    title: this.state.topicBox,
    user: this.state.payloadBox
  }
  itemsRef.push(item).set("name");
  this.setState({
    topicBox: '',
    payloadBox: ''
  });

}

const LoginPage = () =>
<MuiThemeProvider theme={theme}>
      <div>
        <AppBar position="static" id='title'>
          <Toolbar>
            <Typography type="title" color='inherit'>
              MVHS Homework App
            </Typography>
            <div id='avatar' color='inherit'><Avatar>{name[0]}</Avatar></div>
          </Toolbar>
        </AppBar>

      <input 
        type="text" 
        name="topicBox" 
        placeholder="Name" 
        value={ this.state.topicBox }
        onChange={ this.handleChange } 
      />
      <input 
        type="text" 
        name="payloadBox" 
        placeholder="Details"
        value={ this.state.payloadBox } 
        onChange={ this.handleChange } 
      />
      <Button variant="raised" color="secondary" style = {theme.bottomView} onClick={ this.publish }>
        Secondary
      </Button>
      </div>

    </MuiThemeProvider>



export default LoginPage

В приведенном выше коде есть ошибка:

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

И ошибка:

TypeError: this.setState не является функцией

Почему это происходит?

РЕДАКТИРОВАТЬ: Ошибка, я считаю, является единственной проблемой с кодом на данный момент.Не стесняйтесь сообщить мне, если какие-либо еще ошибки.:) (Правильно ли я устанавливаю автомобиль?)

РЕДАКТИРОВАТЬ: Будет ли этот код отправлять значение с отредактированными текстовыми входами в базу данных?

Answer 1

Вам нужно расширить домашнее задание с помощью компонента.А также вы пытаетесь установить состояние с помощью неизвестного ключа с именем «значение»

import React,{ Component } from 'react';
class Homework extends Component {
  constructor(props) {
    super(props);

    this.state = {
      topicBox: null,
      payloadBox: null
    };

    this.publish = this.publish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  publish(e) {
    const { name, value } = e.target;
    this.setState({ [name]: value});  // this will set your state of current input, that you were handling
    //this.setState({value: event.target.value});
  }
  handleChange(e) {
    const { name, value } = e.target;
    this.setState({ [name]: value}) 
    //this.setState({value: event.target.value});
  }

   render(){
     return(
       // your code
       <div>
         <LoginPage handleChange={this.state.handleChange} publish={this.state.publish} topicBox={this.state.topicBox} payloadBox={this.state.payloadBox}  />
       </div>
     )
   } 
}

Это ваш функциональный компонент, в котором вы пытаетесь изменить свое состояние.Вы не можете изменить состояние прямо здесь, внутри функционального компонента.Действительно, вы можете передать функции (handleChange и publish) в качестве опоры для функционального компонента (LoginPage).Вы можете использовать ссылки ниже для справки https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541

// here you can access the function as props. ie the Homework component passed its state such as topicBox, payloadBox, handleChange function and publish function as a props to LoginPage functional component. Here you can access it by using  props.handleChange (which is the prop name mentioned in Homework component)

export const LoginPage = (props) =>
<MuiThemeProvider theme={theme}>
      <div>
        <AppBar position="static" id='title'>
          <Toolbar>
            <Typography type="title" color='inherit'>
              MVHS Homework App
            </Typography>
            <div id='avatar' color='inherit'><Avatar>{name[0]}</Avatar></div>
          </Toolbar>
        </AppBar>

      <input 
        type="text" 
        name="topicBox" 
        placeholder="Name" 
        value={ props.topicBox }
        onChange={ props.handleChange } 
      />
      <input 
        type="text" 
        name="payloadBox" 
        placeholder="Details"
        value={ props.payloadBox } 
        onChange={ props.handleChange } 
      />
      <Button variant="raised" color="secondary" style = {theme.bottomView} onClick={props.publish }>
        Secondary
      </Button>
      </div>

    </MuiThemeProvider>