反应以前的状态不传递 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 函数中的设置状态


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

现在在上面的 searchUsers 方法中我得到了数据，但它没有更新 UI。所以一直以来 newMap return 都会返回所有数据，这很奇怪。我在 searchUsers 中还有一个额外的 return，它 return 编辑了所有数据。删除后它有效。

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

Answer 1

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

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

反应以前的状态不传递 useState

React previous state not passing in useState

typescript

reactjs

use-state