React-JS组件间数据传递问题求助

Hey Rohit, let's walk through why your state data isn't making it to the child component correctly—this is a super common pitfall, so we'll fix it step by step.

First, Let's Cover the Core Issues in Your Current Code #

Looking at your importJSON function, there are a few key things that might be tripping you up:

1. setState is asynchronous
   Your console.log(this.state.data) right after setState will almost always print the old state value, because React batches state updates for performance. That doesn't mean the state isn't updating—it just means you're checking too soon.

   Fix this by using setState's callback function to verify the update:

   importJSON = () => { // Use arrow function to preserve `this` context
     fetch("https://bitbucket.org/..")
       .then(response => response.json())
       .then(responseJson => {
         this.setState({ data: responseJson.fulldata }, () => {
           // This runs AFTER state is updated
           console.log("Updated state:", this.state.data);
         });
       })
       .catch(err => console.error("API Error:", err)); // Don't forget error handling!
   };
   

2. Make sure you're actually calling importJSON in componentDidMount
   Double-check your parent component's componentDidMount method—you need to trigger the API call here:

   componentDidMount() {
     this.importJSON();
   }
   

   Also, if you defined importJSON as a regular function (not an arrow function), you'll need to bind this in the constructor to avoid undefined errors:

   constructor(props) {
     super(props);
     this.state = { data: [] }; // Initialize with empty array to avoid undefined issues
     this.importJSON = this.importJSON.bind(this);
   }
   

Passing Data to the Child Component Correctly #

Once your parent state is updating properly, you need to pass the data as a prop to your child component. Here's how to do it:

Parent Component Render Method:

render() {
  return (
    <div>
      {/* Pass the state data as a prop to the child */}
      <YourChildComponent data={this.state.data} />
    </div>
  );
}

Child Component Handling the Prop

Whether your child is a class component or function component, you need to access the prop correctly and handle the loading state (since the API call takes time):

Class Component Example:

class YourChildComponent extends React.Component {
  render() {
    const { data } = this.props;

    // Show loading state while data is being fetched
    if (!data || data.length === 0) {
      return <div>Loading data...</div>;
    }

    // Render your data once it's available
    return (
      <div>
        {data.map(item => (
          <div key={item.id}>{item.yourField}</div> // Always add a unique key for lists
        ))}
      </div>
    );
  }
}

Function Component Example:

function YourChildComponent(props) {
  const { data } = props;

  if (!data || data.length === 0) {
    return <div>Loading data...</div>;
  }

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.yourField}</div>
      ))}
    </div>
  );
}

Quick Debug Checks to Rule Out Other Issues #

• Verify the API response: Log responseJson in your fetch chain to make sure responseJson.fulldata actually exists (maybe the field name is camelCase like fullData instead of fulldata?).
• Check for typos: Make sure the prop name you're passing (data) matches exactly what the child component is trying to access (this.props.data or props.data).

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