React报错：React.createElement: type is invalid 动态渲染问题求助

Hey there! Let's work through that error you're seeing—this is a super common issue when you're getting started with conditional rendering and map in React, so we'll get it sorted out quickly.

First, Let's Break Down the Common Causes of This Error #

That error usually pops up when React can't recognize a valid component/element to render. For your case, the most likely culprits are:

• Your conditional logic isn't returning valid JSX when showPerson is true
• You're missing a unique key prop on elements created with map (while this doesn't always throw this exact error, it's a critical best practice that can cause unexpected behavior)
• A typo or issue with how you're structuring your rendered content

Here's a Fixed Version of Your Component #

I'll adjust your code to fix the error and meet your goal of showing three boxes when the button is clicked:

import React, { Component } from 'react';

class PersonRenderer extends Component {
  // Your original state is good to go!
  state = { 
    person: [ 
      {name: "Rohit", age: 24}, 
      {name: "Hariom", age: 23}, 
      {name: "Vaibhav", age: 58} 
    ], 
    someOtherState: "Untouched state", 
    showPerson: false 
  };

  // Handler to toggle the showPerson state (uses arrow function to avoid this binding issues)
  toggleShowPersons = () => {
    this.setState(prevState => ({
      showPerson: !prevState.showPerson
    }));
  };

  render() {
    let personContent = null;

    // Only render the boxes when showPerson is true
    if (this.state.showPerson) {
      // Wrap the mapped elements in a parent element (or React Fragment <>)
      // This ensures React gets a single valid element to render
      personContent = (
        <div>
          {this.state.person.map((individual, index) => (
            // Add a unique key prop (use a unique ID from your data if you have one instead of index)
            <div 
              key={index}
              style={{
                border: '2px solid #222',
                padding: '1rem',
                margin: '1rem 0',
                borderRadius: '4px'
              }}
            >
              <p><strong>Name:</strong> {individual.name}</p>
              <p><strong>Age:</strong> {individual.age}</p>
            </div>
          ))}
        </div>
      );
    }

    return (
      <div className="app-container">
        {/* Button to toggle visibility */}
        <button onClick={this.toggleShowPersons}>
          {this.state.showPerson ? 'Hide Boxes' : 'Show Boxes'}
        </button>
        {/* Render the person content (or nothing if it's null) */}
        {personContent}
      </div>
    );
  }
}

export default PersonRenderer;

Key Fixes & Notes #

1. Valid JSX Wrapping: When using map to render multiple elements, you need to wrap them in a single parent element (like the outer <div> here, or a React Fragment <> if you don't want extra DOM nodes). React can't render multiple sibling elements directly.
2. Unique key Prop: Every element created with map needs a unique key to help React efficiently update the DOM. Using index works here, but if your person objects had a unique id property, that's better.
3. Proper State Toggle: The toggleShowPersons handler uses prevState to safely update the state (this is important when your new state depends on the previous state value).
4. Clear Conditional Logic: The personContent variable is initialized to null (so nothing renders by default), and only gets set to valid JSX when showPerson is true.

Double-Check These If You Still See the Error #

• Make sure your component name starts with a capital letter (React treats lowercase names as HTML tags, which will cause this error).
• Verify you're correctly exporting and importing the component (no typos in file paths or component names).
• Ensure you're not accidentally returning a raw array instead of JSX from your conditional logic.

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