Question

我遇到的问题是 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>
 );

}

Answer 1

如果您想在 def check_prime(yo): yo = int(input) if yo % 1 != 0 and yo % yo !=0: return("False") else: return("True") 更改时运行某些内容，可以使用在依赖项数组中包含 state 的 useEffect 钩子：

state

如果您只需要对 useEffect(() => { console.log(state); }, [state]); 对象中的属性进行条件化，您可以在依赖数组中使用该属性：

state

如果您想继续使用 useEffect(() => { console.log(state.name); }, [state.name]); 函数，最好在效果中定义它，这样您就不必在依赖项数组中将其列为依赖项：

filterData

如果您出于任何原因需要在效果之外定义 useEffect(() => { function filterData() { console.log(state); } filterData(); }, [state]); 函数，那么您可能应该使用 filterData 钩子来保持相同的函数引用，只要 {{ 1}} 是一样的，只有在更新 useCallback 时才改变它：

state

Answer 2

这对我有用。我需要在没有初始运行的情况下找到使用 useEffect 的方法。

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
 

 const firstUpdate = useRef(true);
 useLayoutEffect(() => {
   if (firstUpdate.current) {
   firstUpdate.current = false;
  return;
}

filteredData();

});

Answer 3

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

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

这样你就不必担心覆盖以前的值，如果这是你想要尝试的

Answer 4

在您的特定情况下，您可以检查您的 name 何时更改，然后在 useEffect() 钩子内运行它：

useEffect(() => filteredData(), [state.name]);

更多参考见How to use setState callback on react hooks

Answer 5

最好的方法是使用 useEffect 并将您的状态添加到依赖项数组中。

您可以从 useEffect 调用它并将状态添加到 useEffect 的依赖数组中，而不是在 change 函数中调用 filtersData()。所以，只要你的状态更新，你的 useEffect 就会被触发。

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <div id="main"></div>
    <script>
    $(document).ready(function() {
                update();

    });

    function update() {
        $.getJSON("hasil.php", function(data) {
        $("#main").empty();
        var no = 1;
        $.each(data.result, function() {
            var num = this['num'];
        
            var input = document.createElement('input');
            input.value = num; //THIS IS VALUE OF INPUT
            input.id = num; //THIS IS ID OF INPUT 
        $("#main").append(input);
        });
    
        });
    }
    </script>

使用带有 useState 的回调函数

5 个答案: