Reset useState limit request in useEffect (reset to initial limit on value change)

Question

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

在我的代码中，我基本上有一个下拉选择，returns 数据基于其选择的值。

我可以毫无问题地显示它，并且还可以添加一个 'load more' 按钮来更新来自 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 天前才学会这个。

Answer 1

你好我做了下面的编辑以在品种改变时重置显示更多

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

Reset useState limit request in useEffect (reset to initial limit on value change)

Reset useState limit request in useEffect (reset to initial limit on value change)

reactjs

react-hooks

use-effect

use-state