在React.JS中处理API调用的输入更改

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

const ApiCallComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const [apiData, setApiData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 在组件挂载后发起API调用
    fetchData();
  }, []);

  const fetchData = () => {
    // 发起API调用
    fetch(`https://api.example.com/data?input=${inputValue}`)
      .then(response => response.json())
      .then(data => {
        // 处理API调用的结果
        setApiData(data);
        setError(null);
      })
      .catch(error => {
        // 处理错误
        setApiData(null);
        setError(error.message);
      });
  };

  const handleInputChange = event => {
    // 更新输入值
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      {apiData && <div>{apiData}</div>}
      {error && <div>Error: {error}</div>}
    </div>
  );
};

export default ApiCallComponent;