使用 React.js 进行 Twitter 用户搜索以显示姓名、关注者、关注等

Question

我是 react.js 的新手，我只是在尝试一些我能想到的随机项目，其中之一是在 react.js 中制作一个搜索引擎，只需输入他们的名字即可在 Twitter 上查找用户在搜索栏中，结果将使用 Twitter API 显示他们的详细信息。但是，在执行此操作时，我遇到了控制台中的以下错误： Error ocuring

应用程序.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;

我将不胜感激为解决此问题提供的任何帮助。谢谢你。

Answer 1

我建议您将 const fetchData = async () => { ... 移到 useEffect() 之外，这听起来可能很傻，但是对于 Authorization: Bearer <YOUR_TOKEN>，您是否已将 <YOUR_TOKEN> 更改为您的实际令牌？最后，你不需要 method : "GET" 因为你正在做 axios.get( ...

请试试这段代码：

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);

 
    const fetchData = async () => {
        try {
            const { data: user } = await axios.get(`https://api.twitter.com/1.1/users/show.json?screen_name=${username}`, {           
                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`, {
                headers: {
                    Authorization: `Bearer <YOUR_TOKEN>`
                }
            });
            setUser(user);
            setTweets(tweets);
        } catch (error) {
            setError(error);
        }
    };

 useEffect(() => {
    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;

Answer 2

您看到的错误消息与 CORS（跨源资源共享）有关，它阻止您在“http://localhost:3000”上运行的 JavaScript 代码向“https://api.twitter.com”发出请求”。

CORS 是 Web 浏览器实现的一项安全功能，可防止网页向与为该网页提供服务的域不同的域发出请求。

要解决此问题，您需要在服务器端设置 CORS 标头。 “Access-Control-Allow-Origin”标头用于指定允许哪些域向服务器发出请求。您可以将此标头设置为“*”以允许任何域发出请求，或者您可以将其设置为您的应用程序正在运行的特定域，在您的例子中为“http://localhost:3000”。

您还可以使用代理服务器以避免在尝试访问 Twitter 的 API 时出现 CORS 问题。这意味着您的 React 应用程序会将请求发送到您的服务器，然后服务器会将其转发到 Twitter 的 API。然后它将收到响应，并将其转发回您的 React 应用程序。这样，您的应用程序将永远不会被 CORS 策略阻止，因为请求来自您的服务器，而不是直接来自您的应用程序。