Question

useEffect 显示数据然后无法读取未定义的属性

2022-06-01

113

javascript reactjs react-hooks

我从第三方 API 获取数据。当我使用 console.log 时，数据会显示在控制台中，但随后出现 Uncaught TypeError: Cannot read properties of undefined (reading 'tweet_results') ，当我尝试返回时，我实际上并没有在屏幕上看到任何内容，尽管我在其中设置了一些条件。

const LatestTweets = () => {
  const [tweets, setTweets] = useState([]);
  useEffect(() => {
    const getTweets = async () => {
      try {
        const response = await axios.get(
          "https://myendpoint.com"
        );

        setTweets(
          response.data.data.user.result.timeline.timeline.instructions[1]
            .entries
        );
      } catch (err) {
        console.log(err);
      }
    };
    getTweets();
  }, []);

  const test = tweets.map((t) => {
    console.log(t.content.itemContent.tweet_results.result.legacy.full_text);
  });

  return (
    <div>
      {tweets &&
        tweets.length &&
        tweets.map((t) => (
          <p>{t.content.itemContent.tweet_results.result.legacy.full_text}</p>
        ))}
    </div>
  );

Answer 1

看起来 tweet_results 无法包含来自真实数据的某些对象。因此，为了防止出现此错误，请使用 ?. 进入对象内部。

const LatestTweets = () => {
  const [tweets, setTweets] = useState([]);
  useEffect(() => {
    const getTweets = async () => {
      try {
        const response = await axios.get(
          "https://myendpoint.com"
        );

        setTweets(
          response.data.data.user.result.timeline.timeline.instructions[1]
            .entries
        );
      } catch (err) {
        console.log(err);
      }
    };
    getTweets();
  }, []);

  const test = tweets.map((t) => {
    console.log(t.content?.itemContent?.tweet_results?.result?.legacy?.full_text);
  });

  return (
    <div>
      {tweets &&
        tweets.length &&
        tweets.map((t) => (
          <p>{t.content?.itemContent?.tweet_results?.result?.legacy.full_text}</p>
        ))}
    </div>
  );