React函数式子组件独立运行问题求助：传递指定值与处理函数

Hey there! I see you're trying to get your functional child component EditCert to manage its own state, access the cParticipantId from the parent, and call the parent's handler—all without using a class component and constructor. Let's walk through how to fix this step by step.

1. Accessing cParticipantId in the Child Component #

First off, you're already passing the parent's entire state to the child via myprops={this.state}, which means you can directly access cParticipantId in EditCert using myprops.cParticipantId. To make this cleaner and avoid unnecessary re-renders, I'd recommend explicitly passing only the props you need instead of the whole state:

Parent component render update:

this.state.edit ? (
  <EditCert 
    description={undefined} 
    context={this.props.context} 
    cParticipantId={this.state.cParticipantId} 
    handler={this.handlerFilters} 
  />
) : (
  // Main component content
)

Then in the child, destructure the props directly in the function definition for easier use:

export const EditCert = ({ cParticipantId, handler, context }) => {
  // Now you can use cParticipantId directly here
  console.log("Current Participant ID:", cParticipantId);
  
  // ... rest of your code
}

2. Managing Local State in a Functional Component #

You don't need a constructor for functional components—React's useState hook is designed to handle local state initialization and updates. Let's say your child component needs to track form input values; here's how you'd set that up:

import * as React from 'react';
import { useState } from 'react'; // Don't forget to import useState

export const EditCert = ({ cParticipantId, handler, context }) => {
  // Initialize local state: [stateValue, setStateFunction]
  const [formData, setFormData] = useState({
    fullName: '',
    certificationStatus: 'pending'
    // Add any other fields your component needs
  });

  // Example handler for updating form state
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  function ExitHandler() {
    handler();
  }

  return (
    <div>
      {/* Example form using local state */}
      <div style={{ marginBottom: '1rem' }}>
        <label>Full Name:</label>
        <input 
          type="text" 
          name="fullName" 
          value={formData.fullName} 
          onChange={handleInputChange} 
          style={{ marginLeft: '0.5rem' }}
        />
      </div>
      <Button onClick={ExitHandler} size="small" style={{ float: "right", width: "150px", marginLeft: "10px" }} variant="contained" >Cancel</Button>
    </div>
  );
}

3. Keeping Business Logic Self-Contained #

Since EditCert is a functional component, you can define all its business logic directly inside it—whether that's API calls, validation, or state transformations. For example, if you need to save changes using the cParticipantId, add a function right in the component:

const saveChanges = async () => {
  try {
    // Use cParticipantId and local formData for your API call
    await fetch(`/api/participants/${cParticipantId}/cert`, {
      method: 'PUT',
      body: JSON.stringify(formData),
      headers: { 'Content-Type': 'application/json' }
    });
    handler(); // Call parent handler to switch back to main component after saving
  } catch (error) {
    console.error("Error updating certification:", error);
    // Add error state handling here if needed (e.g., show a toast)
  }
};

Then add a Save button to trigger this function:

<Button onClick={saveChanges} size="small" style={{ float: "right", width: "150px" }} variant="contained" color="primary">Save Changes</Button>

Key Takeaways #

• Functional components use hooks (like useState) instead of constructors for state management—no class syntax required.
• Explicitly passing only the props your child needs makes code more readable and reduces unnecessary re-renders.
• All your child component's business logic, state, and event handlers can live directly inside the function, keeping it fully self-contained.

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