状态正在改变，但颜色没有改变

import React, { useState } from 'react';

function MyComponent() {
  const [color, setColor] = useState('red');

  function changeColor() {
    setColor('blue');
  }

  return (
    <div style={{ color: color }}>
      This text will change color.
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [color, setColor] = useState('red');

  useEffect(() => {
    // 模拟异步操作
    setTimeout(() => {
      setColor('blue');
    }, 1000);
  }, []);

  return (
    <div style={{ color: color }}>
      This text will change color after 1 second.
    </div>
  );
}

import React, { useState } from 'react';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  function toggleActive() {
    setIsActive(!isActive);
  }

  return (
    <div style={{ color: isActive ? 'green' : 'red' }}>
      This text will change color based on active state.
      <button onClick={toggleActive}>Toggle Active</button>
    </div>
  );
}

import React, { useState } from 'react';

function MyComponent() {
  const [color, setColor] = useState('red');

  function changeColor() {
    setColor('blue');
  }

  return (
    <div style={{ color: color }}>
      This text will change color.
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}