我如何处理变量作为变量 - 属性的反应？

Question

我正在尝试根据我的端点 API 组织我的代码顺序以将 feed 处理为 feed.*，但是 react 不允许我直接将函数发送到组件中，但我想要类似于 feed.results, feed. count 的东西

const [initialized, setIntialized] = useState(false);  
const [feed, setFeed] = useState([]);
const browserFeed = async () => {  
    const response = await browse();
    setFeed(response.results);  
    setIntialized(true);  
};

useEffect(() => {  
    if (!initialized) {  
    browserFeed();  
    }  
}); 


export const browse = () =>  {
    return api.get('xxxxxxxx')
    .then(function(response){
      return response.data // returns .count , .next, .previous, and .results
    })
    .catch(function(error){
      console.log(error);
    });
  }

  <div className="searched-jobs">
  <div className="searched-bar">
    <div className="searched-show">Showing {feed.count}</div>
    <div className="searched-sort">Sort by: <span className="post-time">Newest Post </span><span className="menu-icon">▼</span></div>
  </div>
  <div className="job-overview">
    <div className="job-overview-cards">
      <FeedsList feeds={feed} />
      <div class="job-card-buttons">
        <button class="search-buttons card-buttons-msg">Back</button>
        <button class="search-buttons card-buttons">Next</button>
      </div>
    </div>
  </div>
</div>

Answer 1

如果您要处理的是分页，这是一种解决方案：

async function fetchFeed(page) {
  return api.get(`https://example.com/feed?page=${page}`);
}

const MyComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [feed, setFeed] = useState([]);

  // Fetch on first render
  useEffect(() => {
    fetchFeed(1).then((data) => setFeed(data));
  }, []);

  // Update feed if the user changes the page
  useEffect(() => {
    fetchFeed(currentPage).then((data) => setFeed(data));
  }, [currentPage]);

  const isFirstPage = currentPage === 1;

  return (
    <>
      <FeedsList feeds={feed} />
      {isFirstPage && (
        <button onClick={() => setCurrentPage(currentPage - 1)}>Back</button>
      )}
      <button Click={() => setCurrentPage(currentPage + 1)}>Next</button>
    </>
  );
};