如何在传递道具后在 React 中渲染组件 onClick？

Question

如何使用 handleRequest 中发生的提取调用返回的数据更新 LatestTweetsComponent？ tweets 正在正确更新 onClick，但 LatestTweetsComponent 未呈现或更新。我可能处理不当。

const LatestTweets = () => {
  const [tweets, setTweets] = useState(null)

  const handleRequest = async () => {
    // this hits an api to get tweets and sets the tweets
    // is this where the LatestTweetsComponent render is called?
  }

  return (
    <div>
      <button onClick={() => handleRequest()}>View Latest Tweets</button>
      <LatestTweetsComponent tweets={tweets} />
    </div>
  )
}

const LatestTweetsComponent = props => {
  return (
    <div>
      {props.map((tweet, index) => {
        return <p key={index}>{tweet}</p>
      })}
    </div>
  )
}

export default LatestTweets

Answer 1

在useEffect中使用那个handleFetch。因此，只要您的状态发生变化，useeffect 就会重新呈现该变化。

并在 useEffect 中使用推文作为参数

Answer 2

我认为这是因为你试图映射到“props”，而你应该映射到“props.tweets” 试试这个：

const LatestTweetsComponent = props => {
  return (
    <div>
      {props.tweets.map((tweet, index) => {
        return <p key={index}>{tweet}</p>
      })}
    </div>
  )
}

如何在传递道具后在 React 中渲染组件 onClick？

How to render component onClick in React after passing props?

reactjs

next.js