React中如何检查state参数非未定义？新建作者表单异常排查

Hey there! Let's break down your questions and get you back on track with your React/Flux app.

How to Check if a State Property is Not Undefined in React #

There are a few reliable ways to verify that a state property isn't undefined—and importantly, avoid errors if the parent object (like author) is also null or undefined:

• Strict inequality check with optional chaining: This is my go-to for most cases, since it safely handles nested properties:

  if (this.state.author?.firstName !== undefined) {
    // Do something with firstName
  }
  

  The ?. optional chain operator ensures we don't throw an error if this.state.author is null or undefined before checking firstName.

• Using typeof: This is extra safe if you're worried about the property not existing at all (though in React state, you'll usually initialize your state shape upfront):

  if (typeof this.state.author?.firstName !== 'undefined') {
    // Property exists and isn't undefined
  }
  

• Check if the property exists on the object: If you want to confirm the property is actually part of the author object (not just truthy), use the in operator:

  if (this.state.author && 'firstName' in this.state.author) {
    // firstName is a property of author (could still be undefined, but exists)
  }
  

Fixing the New Author Form Input Issue #

It sounds like your form is throwing errors when creating a new author, even after checking if firstName is null. Here are the most common fixes for this scenario:

1. Initialize your state properly for new authors
   When creating a new author, don't set author to null or leave firstName as undefined. Instead, initialize an empty object with default empty string values. This ensures your controlled inputs have a valid value from the start:

   // In your component's constructor or useState hook
   this.state = {
     author: {
       firstName: '',
       lastName: '',
       // Add other author fields here
     }
   };
   

   If you start with author: null, trying to access author.firstName will throw a "Cannot read property 'firstName' of null" error—this is probably the root of your form issue.

2. Verify your controlled input bindings
   Make sure your form inputs are properly linked to state with both value and onChange handlers. For example:

   <input
     type="text"
     placeholder="First Name"
     value={this.state.author.firstName}
     onChange={(e) => {
       // Update state without overwriting other author properties
       this.setState({
         author: {
           ...this.state.author,
           firstName: e.target.value
         }
       });
     }}
   />
   

   Using the spread operator (...this.state.author) preserves existing properties while updating the one that changed—this prevents losing data when typing in multiple fields.

3. Double-check your new/edit logic
   When switching between creating a new author and editing an existing one, ensure you reset or update the state correctly:

   • For editing: Fetch the existing author data (from Flux store or props) and set it to state.
   • For creating: Reset the state to your empty author object (like the initialization above).
     Avoid mixing null values with your state shape—stick to consistent object structures for author whether you're creating or editing.

4. Use the browser error to narrow it down
   The browser's console error will tell you exactly what's breaking. If it's a "Cannot read property X of undefined/null" error, trace back where that property is being accessed—chances are you're trying to read a field from an author state that's not initialized properly.

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