为何执行this.publish.bind(this)时出现Uncaught (in promise) TypeError？

The error "Uncaught (in promise) TypeError: Cannot read property 'bind' of undefined" occurs because the publish and handleChange methods don't exist on your Homework class instance when you try to bind them in the constructor. Here's the breakdown and how to fix it:

Immediate Root Cause #

Looking at your code:

• The publish function is defined as a standalone global function, not as a method inside the Homework class.
• The handleChange function isn't defined anywhere at all.

When your constructor runs this.publish.bind(this), this.publish is undefined, hence the TypeError.

Step-by-Step Fixes #

1. Fix the Homework Class Methods #

Move publish into the Homework class and add the missing handleChange method:

class Homework extends Base {
  constructor() {
    super();
    this.state = { topicBox: null, payloadBox: null };
    this.publish = this.publish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  async loadTest() { /* ... existing code ... */ }

  // Add publish as a class method
  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 };
    // Fix Firebase write operation (push() directly adds the item)
    itemsRef.push(item);
    this.setState({ topicBox: '', payloadBox: '' });
  }

  // Define handleChange to update state
  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
}

2. Fix React Component State Management #

Your LoginPage is a functional component but uses this.state and this.handleChange—functional components don't have a this context. Use React Hooks (modern approach) to manage UI state directly in the component:

import { useState } from 'react'; // Ensure this import is present

const LoginPage = () => {
  // Local state for input fields
  const [topicBox, setTopicBox] = useState('');
  const [payloadBox, setPayloadBox] = useState('');

  const handleChange = (e) => {
    const { name, value } = e.target;
    name === 'topicBox' ? setTopicBox(value) : setPayloadBox(value);
  };

  const publish = () => {
    console.log(topicBox, payloadBox);
    const itemsRef = firebase.database().ref('Users');
    const item = { title: topicBox, user: payloadBox };
    itemsRef.push(item);
    // Reset inputs after submission
    setTopicBox('');
    setPayloadBox('');
  };

  return (
    <MuiThemeProvider theme={theme}>
      <div>
        {/* ... existing AppBar and Paper code ... */}
        <input 
          type="text" 
          name="topicBox" 
          placeholder="Name" 
          value={topicBox} 
          onChange={handleChange} 
        />
        <input 
          type="text" 
          name="payloadBox" 
          placeholder="Details" 
          value={payloadBox} 
          onChange={handleChange} 
        />
        <Button 
          variant="raised" 
          color="secondary" 
          style={theme.bottomView} 
          onClick={publish}
        >
          Secondary
        </Button>
      </div>
    </MuiThemeProvider>
  );
};

3. Additional Corrections #

• Firebase Write Fix: Your original code used itemsRef.push(item).set("name"), which would overwrite the item with the string "name". Use itemsRef.push(item) to save the item object directly.
• Separation of Concerns: The Homework class should focus on data fetching (like Google Classroom API calls), while the React component handles UI state and rendering. Avoid mixing class state with React component state.

内容的提问来源于stack exchange，提问作者Ron Arel