React.js调用Twitter API查询用户信息报错求助

我是React.js新手，正在开发一个通过搜索框输入名称查询Twitter用户信息的项目，使用Twitter API获取用户姓名、粉丝数、关注数等详情。但编写代码后控制台出现错误，添加搜索框功能后仍存在相同问题，以下是两次编写的App.js代码，请求帮助解决该报错问题。

初始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;

更新后带搜索框的App.js代码 #

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;

常见报错原因与修复方案 #

1. API认证错误 #

• 问题：代码中使用的<YOUR_TOKEN>或YOUR_BEARER_TOKEN未替换为有效的Twitter API Bearer Token，或者Token权限不足。
• 修复：
  • 前往Twitter开发者平台生成并获取有效的Bearer Token，确保Token拥有users.read和tweet.read权限。
  • 将代码中的占位符替换为实际的Token，注意不要泄露到公开仓库。

2. 空值/未定义属性访问错误 #

• 问题：初始代码中username props可能未传入，导致API请求URL无效；更新后代码中userData.status可能为undefined，直接访问userData.status.text会抛出错误。
• 修复：
  • 初始代码：添加username判断，为空时不发起请求：

    useEffect(() => {
      if (!username) return;
      // 原有请求逻辑
    }, [username]);
    

  • 更新后代码：访问嵌套属性前做空值判断：

    <p>Pinned Tweet: {userData.status?.text || 'No Pinned Tweet'}</p>
    

3. API搜索结果为空报错 #

• 问题：users/search.json返回的结果可能为空数组，直接访问response.data[0]会引发未定义错误。
• 修复：
  • 在搜索逻辑中添加空结果判断：

    .then(response => {
      if (response.data.length > 0) {
        setUsername(response.data[0].screen_name);
      } else {
        setUsername('');
        console.log('未找到匹配用户');
      }
    })
    

4. 渲染时的初始状态问题 #

• 问题：初始状态user或userData为空对象，渲染时访问user.name等属性会显示undefined，影响体验。
• 修复：
  • 添加加载状态提示：

    // 新增加载状态
    const [isLoading, setIsLoading] = useState(false);
    
    // 请求前后设置加载状态
    useEffect(() => {
      if (!searchValue) return;
      setIsLoading(true);
      axios.get(...)
        .then(...)
        .catch(...)
        .finally(() => setIsLoading(false));
    }, [searchValue]);
    
    // 渲染时显示加载提示
    if (isLoading) return <div>加载中...</div>;
    

内容的提问来源于stack exchange，提问作者Curious Coder