时间戳

首页 > 解决方案 > 在 useEffect 中重置 useState 限制请求（重置为值更改的初始限制）

reactjs - 在 useEffect 中重置 useState 限制请求（重置为值更改的初始限制）

问题描述

我是 ReactJS 的新手，我想问一下当 useState 达到特定条件时如何重置它。

在我的代码中，我基本上有一个下拉选择，它根据其选定的值返回数据。

我可以毫无问题地显示它，并且还能够添加一个“加载更多”按钮来更新对来自 API 的请求的限制。

我现在的问题是当我将下拉值更改为其他值时，我想将其重置回 10 的限制。

我的下拉代码看起来像这样

import React, { useContext, useState } from 'react';
import { BreedProvider } from './BreedContext';
import { BreedsContext } from './BreedsContext';
import Cats from './Cats';

const BreedSelection = () => {
  const [breeds] = useContext(BreedsContext);
  const [cat, setCat] = useState([]);
  const [limit, setLimit] = useState(10);

  function handleChange(e) {
    setCat(e.target.value);
    setLimit(limit);
  }

  return (
    <>
      <div className="row">
        <div className="col-md-3 col-sm-6 col-12">
          <div className="form-group">
            <label className="form-label" htmlFor="breed">Breed</label>
            <select className="form-control" onChange={handleChange} disabled={breeds.length === 0}>
              <option value={null}>Select Breed</option>
              {breeds.map(breed => (
                <option key={breed.id} value={breed.id}>{breed.name}</option>
              ))}
            </select>
          </div>
        </div>
      </div>
      <BreedProvider breed={cat} limit={limit}>
        <Cats />
      </BreedProvider>
    </>

  );
}

export default BreedSelection;

之后，这会调用我的上下文来显示结果并允许用户通过按钮加载更多内容

import React, { useState, useEffect, createContext } from 'react';
import axios from '../services/axios';
import requests from '../services/requests';

export const BreedContext = createContext();

export const BreedProvider = ({ children, breed, limit }) => {
  const [breeds, setBreeds] = useState([]);
  const [showMore, setShowMore] = useState(limit);

  useEffect(() => {
    async function fetchData() {
      if (breed.length !== 0) {
        const request = await axios.get(requests.fetchBreed + 'page=1&limit=' + showMore + '&breed_id=' + breed);
        setBreeds(request.data);
        console.log('async', request.data.length);
        return request;
      }
    }
    fetchData();

  }, [breed, showMore]);

  return (
    <BreedContext.Provider value={[breeds, setBreeds]}>
      {children}
      <div className="row">
        <div className="col-md-3 col-sm-6 col-12">
          <button type="button" className="btn btn-success" onClick={() => { setShowMore(showMore + limit) }}>Load more</button>
        </div>
      </div>
    </BreedContext.Provider>
  );
}

我现在的问题是如何在更改下拉值后将限制重置为 10？ReactJS 对我来说很新，我大约 2 天前才知道这一点。

标签： reactjsreact-hooksuse-effectuse-state

解决方案

您好，我在下面进行了编辑以重置显示更多当品种改变时

import React, { useState, useEffect, createContext } from 'react';
import axios from '../services/axios';
import requests from '../services/requests';

export const BreedContext = createContext();

export const BreedProvider = ({ children, breed, limit,resetLimit}) => {
  const [breeds, setBreeds] = useState([]);
  const [showMore, setShowMore] = useState(limit);
  useEffect(() => {
     if (breed.length !== 0) {
        setShowMore(limit);
     }
  }, [breed]);
  useEffect(() => {
    async function fetchData() {
      if (breed.length !== 0) {
        const request = await axios.get(requests.fetchBreed + 'page=1&limit=' + showMore + '&breed_id=' + breed);
        setBreeds(request.data);
        console.log('async', request.data.length);
        return request;
      }
    }
    fetchData();

  }, [showMore,breed]);

  return (
    <BreedContext.Provider value={[breeds, setBreeds]}>
      {children}
      <div className="row">
        <div className="col-md-3 col-sm-6 col-12">
          <button type="button" className="btn btn-success" onClick={() => { setShowMore(showMore + limit) }}>Load more</button>
        </div>
      </div>
    </BreedContext.Provider>
  );
}

推荐阅读