React项目中数据新增时如何自动生成播放声音的代码？

Hey there! I get your frustration—having to manually add code every time new data comes in is no fun. Let's refactor your component to handle dynamic data automatically, so new entries render and trigger sound playback without you touching the code again.

Step 1: Full Refactored Component #

Here's the updated code that handles dynamic data, auto-rendering, and conditional sound playback:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Sound from './Mp3'; // Assuming this is a valid audio component or file path

class PeopleMonitor extends Component {
  state = {
    peopleData: [],
    playedSoundIds: new Set() // Track which entries have already triggered sound
  };

  componentDidMount() {
    // Fetch data every 5 seconds
    this.dataInterval = setInterval(() => {
      this.fetchData();
    }, 5000);
  }

  componentWillUnmount() {
    // Clean up interval to prevent memory leaks
    clearInterval(this.dataInterval);
  }

  fetchData = async () => {
    // Replace with your actual data fetch logic (e.g., API call)
    const newData = await fetch('/your-api-endpoint')
      .then(res => res.json())
      .catch(err => console.error('Data fetch error:', err));

    if (newData) {
      this.processNewData(newData);
    }
  };

  processNewData = (newData) => {
    const { playedSoundIds } = this.state;
    const updatedPlayedIds = new Set(playedSoundIds);

    // Check for entries that need sound playback
    newData.forEach(person => {
      if (!person.v && !updatedPlayedIds.has(person.id)) {
        this.playSound();
        updatedPlayedIds.add(person.id);
      }
      // If person's status switches back to true, remove from played set (so we play again if it goes false later)
      if (person.v && updatedPlayedIds.has(person.id)) {
        updatedPlayedIds.delete(person.id);
      }
    });

    this.setState({
      peopleData: newData,
      playedSoundIds: updatedPlayedIds
    });
  };

  playSound = () => {
    // Adjust this if your Sound component uses a different playback method
    const audio = new Audio(Sound);
    audio.play().catch(err => console.error('Sound playback error:', err));
  };

  render() {
    const { peopleData } = this.state;

    return (
      <div className="people-monitor">
        <h2>People Status</h2>
        {peopleData.map(person => (
          <div key={person.id} className="person-entry">
            <p>Name: {person.name}</p>
            <p>Status: {person.v ? 'Active' : 'Inactive'}</p>
            {/* Add any other person details here */}
          </div>
        ))}
      </div>
    );
  }
}

render(<PeopleMonitor />, document.getElementById('root'));

Key Improvements Explained #

• Dynamic Rendering: We use peopleData.map() to render every entry in the data array. New entries are automatically rendered without manual code changes—no more adding new components for each person!
• Smart Sound Playback: The playedSoundIds Set tracks which entries have already triggered the sound. This prevents repeated playback for the same person if their v stays false across data refreshes. If their status switches back to true and then false again, the sound will play again.
• Clean Data Handling: The processNewData function handles both updating the data state and checking for sound triggers in one place, keeping your logic organized.
• Memory Leak Prevention: We clear the interval in componentWillUnmount to stop fetching data once the component is removed from the DOM.

Notes on Your Sound Component #

If your Sound import is a React component instead of a direct audio file path, adjust the playSound method to trigger playback via a ref:

// Add a ref to your component
soundRef = React.createRef();

playSound = () => {
  if (this.soundRef.current) {
    this.soundRef.current.play();
  }
};

// Then add the ref to your Sound component (if needed)
// <Sound ref={this.soundRef} />

Let me know if you need help adapting this to your specific Sound setup!

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