TypeError: Cannot read property 'publish' of undefined 在（ReactJS）中。

Question

我在main.js文件中有如下代码：

...

import Link from 'gatsby-link';
import Cookies from 'universal-cookie';
import "isomorphic-fetch";
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {amber,blue,red} from 'material-ui/colors';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Tabs, { Tab } from 'material-ui/Tabs';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
import Paper from 'material-ui/Paper';
import Button from 'material-ui/Button';
//import SingleInput from 'material-ui/components/SingleInput';  

import Avatar from 'material-ui/Avatar';
import DateRangeIcon from 'material-ui-icons/DateRange';
import AssignmentIcon from 'material-ui-icons/Assignment';
import NoteIcon from 'material-ui-icons/Note';
//import 'react-fab/dist/main.scss';
import * as firebase from 'firebase'

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',
      right: 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>
        <Paper id='calendar'>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell><p id = "class1"></p></TableCell>
                <TableCell><p id = "class1info"></p></TableCell>
              </TableRow>
              <TableRow>
                <TableCell><p id = "class2"></p></TableCell>
                <TableCell><p id = "class2info"></p></TableCell>
              </TableRow>
              <TableRow>
                <TableCell><p id = "class3"></p></TableCell>
                <TableCell><p id = "class3info"></p></TableCell>
              </TableRow>
              <TableRow>
                <TableCell><p id = "class4"></p></TableCell>
                <TableCell><p id = "class4info"></p></TableCell>
              </TableRow>
              <TableRow>
                <TableCell><p id = "class5"></p></TableCell>
                <TableCell><p id = "class5info"></p></TableCell>
              </TableRow>
              <TableRow>
                <TableCell><p id = "class6"></p></TableCell>
                <TableCell><p id = "class6info"></p></TableCell>
              </TableRow>
              <TableRow>
                <TableCell><p id = "class7"></p></TableCell>
                <TableCell><p id = "class7info"></p></TableCell>
              </TableRow>
            </TableHead>
          </Table>
        </Paper>
      <form>

      <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 } 
      />
      </form>
      <Button variant="raised" color="secondary" style = {theme.bottomView} onClick={ this.publish }>
        Add
      </Button>
      </div>

    </MuiThemeProvider>



export default LoginPage

我遇到了这个错误：

类型错误：无法读取未定义属性 'publish'

出错代码在这一行：

<Button variant="raised" color="secondary" style = {theme.bottomView}
onClick={ this.publish }>

我该如何修复这个问题，出了什么错？我是否遗漏了某些代码？

编辑：如果您需要更多的代码或信息，请告诉我。

编辑/更多细节：我想要点击一个按钮然后运行发布函数。

- Ron Arel

---

最好更新完整的代码。我不明白你试图做什么。 - aravind_reddy

好的，稍等一下... - Ron Arel

我添加了完整的代码，@aravind_reddy - Ron Arel

Answer 1

首先，你的代码太难以审查了。

其次，你有一个没有 catch 的 try 。

第三，类属性像函数或对象不需要用 const 声明，我认为这是你的主要问题。

编辑：我刚刚审核了你重新发送的全部代码。this.publish 是你的类 Homework 的类函数，LoginPage 在文件上下文中声明。所以 this.publish 意味着在你的模块中声明的函数名为 publish。-> undefined

注意：要自动绑定类与函数，只需使用箭头函数。

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

- William

---

那么在 const 中删除声明吗？ - Ron Arel

只是为了澄清。你说要删除 'this.publish = this.publish.bind(this);'？ - Ron Arel

看看我编辑后的回答，第一次发送了错误的不完整代码。 - William

最后，我看到了两个函数publish，如果您想指向类中的函数，请使用app.publish，如果您想指向函数外部，请直接调用publish。 - William

我应该在哪里使用app.publish？我非常新手。 - Ron Arel