React新手求助：按钮行为异常与二次API调用问题

Hey there! Let’s tackle your two React issues one by one—first the misbehaving button, then the duplicate API calls. I’ll break down possible causes and fixes based on the code snippet you shared.

1. Button Behavior Not Working As Expected #

Looking at your component code, the emptyNotifications method is bound correctly, and it calls the prop function with preventDefault(). But here are the most likely culprits and fixes:

Possible Causes & Fixes #

• Incomplete Render Code: Your render method cuts off at <p...—make sure you’re actually rendering a button that triggers the emptyNotifications handler. Here’s a complete example of how the render should look:

  render(){
    const { formatMessage } = this.props.intl;
    return (
      <div className="notifications-menu__list__title">
        <p>{formatMessage({ id: 'notifications.label' })}</p>
        <button 
          type="button" // Critical: avoids default form submit behavior if in a form
          onClick={this.emptyNotifications}
          className="notifications-menu__empty-btn"
        >
          {formatMessage({ id: 'notifications.empty' })}
        </button>
      </div>
    );
  }
  

• Missing or Broken Prop: Double-check that the parent component is actually passing a valid emptyNotifications function to NotificationsMenuTitle. If this prop is undefined or not a function, clicking the button will throw an error. Example parent component usage:

  // In parent component
  const handleEmptyNotifications = async () => {
    try {
      await apiCallToEmptyNotifications();
      // Update state to reflect empty notifications
      setNotifications([]);
    } catch (err) {
      console.error('Failed to empty notifications:', err);
    }
  };
  
  <NotificationsMenuTitle 
    intl={yourIntlInstance}
    emptyNotifications={handleEmptyNotifications}
  />
  

• Event Handling Edge Cases: If your button is inside a <form> element, even with preventDefault(), make sure the button’s type is set to button (not submit, which is default). This stops the form from reloading the page and interfering with your handler.

2. Duplicate API Calls #

Since you didn’t share the API call code, I’ll cover the most common reasons this happens in class components like yours, along with fixes:

Possible Causes & Fixes #

• Uncontrolled Lifecycle Hooks: In class components, componentDidUpdate runs on every re-render. If you’re calling your API here without a condition, it’ll trigger duplicate calls. Add a check to only run the API when relevant props/state change:

  componentDidMount() {
    this.fetchNotifications(); // Initial load once
  }
  
  componentDidUpdate(prevProps) {
    // Only refetch if a critical prop (like user ID) changes
    if (this.props.currentUserId !== prevProps.currentUserId) {
      this.fetchNotifications();
    }
  }
  

• Accidental Re-Renders Triggering API Calls: If your emptyNotifications function updates state that causes the component (or its parent) to re-render, make sure your API fetch logic isn’t firing on every re-render. Avoid calling API functions directly in the render method—this is a common source of duplicate calls.
• Redundant Calls in the Empty Handler: If your emptyNotifications prop function calls the API to clear notifications and immediately refetches the list, ensure it only does this once. For example:

  const handleEmptyNotifications = async () => {
    // 1. Call API to empty notifications
    await api.delete('/notifications');
    // 2. Refetch once to update the UI
    await this.fetchNotifications();
  };
  

  Avoid wrapping the fetch in a state update that triggers another re-render and fetch.

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