时间戳

首页 > 解决方案 > 使用带有 useState 的回调函数

javascript - 使用带有 useState 的回调函数

问题描述

我遇到的问题在于 change() 函数。我想在 setState 运行后调用 filtersData() 函数。通常，我会使用回调函数来调用filteredData，但useState 不允许回调。我不能使用 useEffect 因为它会在发生任何数据更改之前调用该函数。

import React, { useState, createContext, useEffect } from "react";
import data from "../Reducers/ListingsData";

   export const GlobalContext = createContext();

   export function GlobalProvider({ children }) {
     const [state, setState] = useState({
      name: "",
      city: "all",
      homeType: "all",
      rooms: 0,
      bathrooms: 0,
      min_price: 0,
      max_price: 10000000,
      min_floor_space: 0,
      max_floor_space: 40000,
      finished_basement: false,
      swimming_pool: false,
      garage: false,
      data: data,
      filteredData: data,
      populateFormsData: "",
      sortby: "price-dsc",
      search: "",
   });

  function change(event) {
    let name = event.target.name;
    let value =
    event.target.type === "checkbox"
    ? event.target.checked
    : event.target.value;

  setState((prevState) => ({ ...prevState, [name]: value }));
  filteredData();
 }

   function filteredData() {
    console.log(state);
}

  return (
   <GlobalContext.Provider value={{ state: state, change }}>
     {children}
   </GlobalContext.Provider>
 );

}

标签： javascriptreactjsreact-hooks

解决方案

你不是把它复杂化了。我使用一种非常简单的方法

 export function GlobalProvider({ children }) {
     const [state, setState] = useState({
      name: "",
       ......
      search: "",
   });

  function change(event,'pass name of field as second argument') {
    //let name = event.target.name;
    //let value =
     //event.target.type === "checkbox"
    //? event.target.checked
    //: event.target.value;
      
      //create the copy of the state object
      let copyState=state
      //modify the new object with value and use second arg for getting key name
      copyState['second argument aka name in this case']= event.target.value
       //save to state
      setState(copyState)
      
      filteredData();
     }

这样，如果您要尝试这样做，您就不必担心覆盖以前的值

推荐阅读