React上一个状态未传入useState

Question

嘿，我正在尝试使用fancypancy react状态管理，我离让它工作已经很近了，但是由于某种原因，我不能让我之前的状态通过。

const [personalState, setPersonalState] = useState<PersonalState>({
    departments: new Map<string, Person[]>(),
    filteredDepartments: new Map<string, Person[]>(),
    order: "descend",
    headings: [
      { name: "Pic", width: "10%", order: "descend" },
      { name: "Name", width: "10%", order: "descend" },
      { name: "phone", width: "20%", order: "descend" },
      { name: "email", width: "20%", order: "descend" },
      { name: "Date of birth", width: "10%", order: "descend" }
    ],
    handleSort: (name: string) => handleSort(name),
    handleSearchChange: (e: any) => handleSearchChange(e)
  });

// this is only for initalization of state
  useEffect(() => {
    console.log('Launching use-effect')
    api.getPersons().then((results: any) => {
      const noduplicates = api.filterDuplicateKeysPersons(results.data.Results);
      const personsInDepartments = api.addPersonsToDepartments(noduplicates);
      setPersonalState({
        ...personalState,
        departments: personsInDepartments,
        filteredDepartments: personsInDepartments,
      });
    });
  }, []);

所以这是代码的一部分。如您所见，我的状态中有一些函数。当我第一次加载网站时，我有两个很好的地图，可以看到数据。现在，当我触发该函数时，如下所示：

const Search = () => {
  const context = useContext();

  return (
    <div className="searchbox">
      <div className="input-group">
          <div className="input-group-prepend">
            <span className="input-group-text" id="">
              Search
            </span>
          </div>
          <input
          className="form-control mr-sm-2"
          type="search"
          placeholder="name"
          aria-label="Search"
          onChange={context.personalState.handleSearchChange}
        />
        </div>
    </div>
  );
}

然后部门和过滤部门转到0，基本上重置。因此，数据不会发送到函数。

编辑:根据请求向问题添加更多上下文

// handles search box, filters each person list and creates a new map and puts it under filtered departments
  const handleSearchChange = (event: any) => {
    const filter = event.target.value;
    const newMap = new Map<string, Person[]>();

    function searchUsers() {
      for (const [key, value] of personalState.departments.entries()) {
        const filteredList = value.filter(person => {
          let values = person.Eesnimi.toLowerCase() + " " + person.Perekonnanimi.toLowerCase();
          if (values.indexOf(filter.toLowerCase()) !== -1) {
            return person;
          }
          return values;
        });
        newMap.set(key, filteredList);
      }
    }

    searchUsers();    
    setPersonalState(developerState => {return {...developerState, filteredDepartments: newMap} });
  };

注意！我正在尝试使用这个聪明的想法。https://gist.github.com/JLarky/5a1642abd8741f2683a817f36dd48e78

这些是我访问的值。

const returnValue = React.useMemo(() => ({
    personalState: personalState, 
    setPersonalState: setPersonalState
  }), [personalState, setPersonalState]);
  return returnValue;

编辑2:我获得了一些进步

我在handleSearchChange函数中更改了设置状态

setPersonalState(prevState => {
      return {
        ...prevState,
        filteredDepartments: searchUsers(prevState)
      }      
    });

现在，在上面的searchUsers方法中，我获得了数据，但它没有更新UI。所以newMap总是会返回所有的数据，这很奇怪。我在searchUsers中还有一个额外的返回值，它返回所有的数据。移除它之后，它就可以工作了。

我想在其他评论员和我自己的调试的帮助下，这个问题暂时得到了解决。

Answer 1

setPersonalState(prevState => {
    ...prevState,
    departments: personsInDepartments,
    filteredDepartments: personsInDepartments,
  })

您需要使用回调来获取之前的状态