Question

我是 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 天前才了解到这一点。

Answer 1

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

struct Neuron;
struct Connection {
    Neuron& neuron;  
    double weight;
};

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

1 个答案: