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

Question

我正在从第 3 方获取数据 API。当我 console.log 它在控制台中显示的数据但随后是 Uncaught TypeError: Cannot read properties of undefined (reading 'tweet_results') 时，当我尝试 return 时实际上也看不到屏幕上的任何内容，即使我那里有一些条件。

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

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

useEffect shows data and then cannot read properties of undefined

javascript

reactjs

react-hooks