对未传入 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>
  );
}

然后departments和filtereddepartments归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函数中的setstate

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

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

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

Answer 1

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

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