React状态值消失

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' }; // 确保状态被正确初始化
  }

  render() {
    return <div>{this.state.value}</div>;
  }
}

// 或者使用函数组件和Hooks
function MyComponent() {
  const [value, setValue] = React.useState(''); // 确保状态被正确初始化
  return <div>{value}</div>;
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    // 处理提交逻辑，确保状态不被重置
    console.log(this.state.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

function MyComponent() {
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    return () => {
      // 清理逻辑，确保状态在组件卸载时不会丢失
      console.log('Component unmounted');
    };
  }, []);

  return <div>{value}</div>;
}

function MyComponent() {
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      setValue(data.value); // 确保状态在数据返回后被正确设置
    };

    fetchData();
  }, []);

  return <div>{value}</div>;
}