开发预算类React应用时测试遇props函数未定义问题

Hey there! Let's work through that "props function undefined" error you're facing with your budget management app. Based on the code you shared, the problem almost certainly ties to how you're passing or accessing the addBill function between your components. Here's a breakdown of the most likely fixes:

1. Ensure You're Passing addBill to AddBill as a Prop #

Looking at your BillContainer code, you've imported AddBill and defined the addBill method, but I don't see where you're actually passing the function to the AddBill component in your render method—that's a super common oversight!

Update your BillContainer to include a proper render method that passes the function as a prop:

class BillContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = { bills: [ ] }
    this.addBill = this.addBill.bind(this)
  }

  addBill(bill) {
    this.setState((state) => ({ bills: state.bills.concat([bill]) }));
    // ... your remaining logic here ...
  }

  // Add this render method if it's missing!
  render() {
    return (
      <div className="bill-container">
        <AddBill addBill={this.addBill} /> {/* Pass the function as a prop here */}
        <BillList bills={this.state.bills} />
      </div>
    );
  }
}

2. Verify AddBill Accesses the Prop Correctly #

Next, check your AddBill component to make sure it's properly accessing the addBill function from props. The fix varies slightly depending on whether AddBill is a class or function component:

If AddBill is a Class Component #

Don't forget to use this.props.addBill when calling the function (the this. is crucial here!):

class AddBill extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    // Example: Build a new bill object from form data
    const newBill = {
      name: "Grocery Run",
      amount: 65,
      date: new Date().toISOString()
    };
    this.props.addBill(newBill); // Access via this.props
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* Your form inputs go here */}
        <button type="submit">Add Bill</button>
      </form>
    );
  }
}

If AddBill is a Function Component #

Make sure you accept props as a parameter, then call props.addBill directly:

function AddBill(props) {
  const handleSubmit = (e) => {
    e.preventDefault();
    const newBill = {
      name: "Grocery Run",
      amount: 65,
      date: new Date().toISOString()
    };
    props.addBill(newBill); // Access directly from props
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form inputs go here */}
      <button type="submit">Add Bill</button>
    </form>
  );
}

3. Optional: Simplify with Arrow Functions (Skip Manual Binding) #

To avoid needing to bind this in the constructor at all, you can define addBill as an arrow function. Arrow functions automatically inherit the class's this context, so you can eliminate the bind step entirely:

class BillContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = { bills: [ ] }
    // No need for this.addBill = this.addBill.bind(this) anymore!
  }

  // Use an arrow function for addBill
  addBill = (bill) => {
    this.setState((state) => ({ bills: state.bills.concat([bill]) }));
    // ... your remaining logic here ...
  }

  render() {
    return (
      <div className="bill-container">
        <AddBill addBill={this.addBill} />
        <BillList bills={this.state.bills} />
      </div>
    );
  }
}

These steps should resolve the "props function undefined" error. The core issue is almost always either forgetting to pass the function as a prop, or not accessing it correctly from within the child component.

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