React Chart组件中如何将数据库数据设置到state对象内的数组？

Hey there! Let's get your chart data updated correctly. The core issue here is making sure you're updating your component's state properly after fetching the citys and followers data—React state updates are asynchronous, so you need to follow the right patterns to avoid bugs.

Optimal Implementation #

The best approach is to use functional updates with setState (to safely rely on the previous state) and shallow copy nested objects (since direct state mutations are forbidden in React). Here's how to do it in your componentDidMount:

Using Promise.all (for parallel data fetching)

componentDidMount() {
  // Fetch both datasets in parallel for better performance
  Promise.all([
    fetch('/your-api-endpoint/citys'),
    fetch('/your-api-endpoint/followers')
  ])
  .then(([cityResponse, followersResponse]) => {
    // Parse JSON from both responses
    return Promise.all([cityResponse.json(), followersResponse.json()]);
  })
  .then(([citys, followers]) => {
    // Update state by copying the existing chartData structure
    this.setState(prevState => ({
      chartData: {
        // Copy all existing properties from prevState.chartData
        ...prevState.chartData,
        // Replace labels with the fetched citys array
        labels: citys,
        datasets: [
          // Copy the first dataset's existing properties (like backgroundColor, label)
          {
            ...prevState.chartData.datasets[0],
            // Replace data with the fetched followers array
            data: followers
          }
        ]
      }
    }));
  })
  .catch(error => {
    console.error('Failed to fetch chart data:', error);
  });
}

Using Async/Await (for cleaner readability)

If you prefer async/await syntax, here's an equivalent version:

async componentDidMount() {
  try {
    // Fetch and parse city data
    const cityResponse = await fetch('/your-api-endpoint/citys');
    const citys = await cityResponse.json();

    // Fetch and parse followers data
    const followersResponse = await fetch('/your-api-endpoint/followers');
    const followers = await followersResponse.json();

    // Update state with the new data
    this.setState(prevState => ({
      chartData: {
        ...prevState.chartData,
        labels: citys,
        datasets: [
          {
            ...prevState.chartData.datasets[0],
            data: followers
          }
        ]
      }
    }));
  } catch (error) {
    console.error('Error loading chart data:', error);
  }
}

Key Notes to Avoid Issues #

• Never mutate state directly: Always use setState—direct mutations won't trigger component re-renders, which is why your chart wasn't updating before.
• Use functional updates: When your new state depends on the previous state (like copying existing chart properties), using prevState ensures you're working with the most up-to-date state value.
• Shallow copy nested objects: Since chartData and datasets are objects/arrays, you need to copy them before modifying nested properties (like labels or data) to avoid unintended side effects.
• Validate data formats: Ensure citys and followers are both arrays of matching lengths—this will prevent rendering issues in your chart component.

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