我对react.js还是个新手，我只是在尝试一些我能想到的随机项目，其中之一是在react.js中创建一个搜索引擎，通过在搜索栏中输入用户名来查找Twitter上的用户，结果将使用Twitter API显示他们的详细信息。然而，当我这样做时，我在控制台中遇到了以下错误：Error ocuring
App.js:

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

const App = ({ username }) => {

  const [user, setUser] = useState({});
  const [tweets, setTweets] = useState({});
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
        try {
            const { data: user } = await axios.get(`https://api.twitter.com/1.1/users/show.json?screen_name=${username}`, {
              method : "GET",
                headers: {
                    Authorization: `Bearer <YOUR_TOKEN>`
                }
            });
            const { data: tweets } = await axios.get(`https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=${username}&count=200`, {
              method : "GET",
                headers: {
                    Authorization: `Bearer <YOUR_TOKEN>`
                }
            });
            setUser(user);
            setTweets(tweets);
        } catch (error) {
            setError(error);
        }
    };
    fetchData();
  }, [username]);

  if (error) {
    return <div>An error occurred: {error.message}</div>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Username: {user.screen_name}</p>
      <p>Followers: {user.followers_count}</p>
      <p>Following: {user.friends_count}</p>
      <p>Bio: {user.description}</p>
      <p>Date Joined: {user.created_at}</p>
      <p>Pinned Tweet: {user.status ? user.status.text : 'No Pinned Tweet'}</p>
      <p>Total Tweets: {user.statuses_count}</p>
    </div>
  );
};

export default App;

• • 更新**

我已经将搜索框特性添加到代码中，但仍然得到相同的errors

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

const TWITTER_API_URL = 'https://api.twitter.com/1.1/users/search.json';

function App() {
  const [username, setUsername] = useState('');
  const [userData, setUserData] = useState({});
  const [searchValue, setSearchValue] = useState('');

  useEffect(() => {
    if (searchValue) {
      axios
        .get(TWITTER_API_URL, {
          params: {
            q: searchValue,
            count: 1
          },
          headers: {
            'Authorization': 'Bearer YOUR_BEARER_TOKEN'
          }
        })
        .then(response => {
          setUsername(response.data[0].screen_name);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }, [searchValue]);

  useEffect(() => {
    if (username) {
      axios
        .get(`https://api.twitter.com/1.1/users/show.json?screen_name=${username}`, {
          headers: {
            'Authorization': 'Bearer YOUR_BEARER_TOKEN'
          }
        })
        .then(response => {
          setUserData(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }, [username]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search by name"
        value={searchValue}
        onChange={e => setSearchValue(e.target.value)}
      />
      {username && (
        <div>
          <p>Username: {username}</p>
          <p>Name: {userData.name}</p>
          <p>Following: {userData.friends_count}</p>
          <p>Followers: {userData.followers_count}</p>
          <p>Bio: {userData.description}</p>
          <p>Date Joined: {userData.created_at}</p>
          <p>Pinned Tweet: {userData.status.text}</p>
          <p>Total Tweets: {userData.statuses_count}</p>
        </div>
      )}
    </div>
  );
}

export default App;

我将感激任何帮助给解决这个问题。谢谢。