父组件获取API数据后同步子组件接收Props及渲染报错问题

Hey there, let's fix this "Cannot read property 'name' of undefined" error you're hitting. The core issue here is that your child component tries to access the name property before the API data has loaded and been set in the parent's state—so the prop it's receiving is still undefined when it first renders. Here are a few solid solutions to handle this:

Solution 1: Initialize State with a Default Structure #

In your Featured component's constructor, set an initial state with an empty object (or a structure matching your API response) instead of leaving data as undefined. This ensures the child component always receives a valid object to work with, even before the API call finishes:

export default class Featured extends Component {
  constructor() {
    super();
    this.state = {
      // Initialize with an empty object instead of undefined
      data: {}
    };
  }

  componentDidMount() {
    // Your API fetch logic here, updating state when data arrives
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return <ChildComponent data={this.state.data} />;
  }
}

Solution 2: Add Conditional Rendering in the Child Component #

Modify the child component to check if the data exists before accessing its properties. You can use a simple truthy check or the optional chaining operator (?.) for cleaner code:

// Child component example
function ChildComponent({ data }) {
  // Option A: Conditional check with logical AND
  return <div>{data && data.name}</div>;

  // Option B: Optional chaining (ES2020+)
  return <div>{data?.name}</div>;
}

Solution 3: Delay Rendering the Child Component in the Parent #

Only render the child component once the API data has been loaded. This way, the child never receives an undefined prop:

// In Featured component's render method
render() {
  const { data } = this.state;
  // Only render child if data exists (adjust check based on your API response)
  return data.name ? <ChildComponent data={data} /> : <div>Loading...</div>;
}

Each of these approaches prevents the TypeError by ensuring the child component never tries to access properties on an undefined value. Pick the one that fits your component structure and coding style best!

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