【问题标题】：How to update the current state with current and previous state with react hooks如何使用反应钩子更新当前状态和先前状态
【发布时间】：2020-06-09 04:46:12
【问题描述】：

在我的反应应用程序中，我有一个父子组件。在我的父组件中，我包含来自子组件的过滤器。无论我从过滤器中选择什么值，我都会将其传递给我的 api 请求参数，该参数在我的 ParentComponent 中的 handleFilterChange 方法下调用。但是，我注意到如果我从 ChildComponent 中选择一个过滤器，它会正确传递，但在选择两个过滤器时，它始终是通过的最新选择的过滤器值。所以，我认为，我需要以某种方式将我以前的状态保存在 handleFilterChange 方法中，但不知道如何实现它。这是我的代码 sn-p。

ParentComponent.js-

const ParentComponent = props => {
  const [filterObj, setFilterObj] = useState({});

  const handleFilterChange = filters => {
    console.log(filters); // Show only latest selected filter
    setFilterObj(filterObj);
    //API call which will pass filters in request params
  };

  return (
    <ChildComponent onChange={handleFilterChange} />
  );
}

ChildComponent.js

const ChildComponent = props => {

  const handleChange = value => {
    console.log(values);// Shows all of the selected filters
    onChange({
      ...Object.keys(values).reduce((val, key) => (isEmpty(value[key]) ? val : { [key]: value[key] }), {}),
    });
  };

  return (
    <Filter onFilterChange={handleChange} />
  );
}

例如，我有过滤器 A 和过滤器 B。第一次，当我选择过滤器 A 时，我看到参数值有过滤器 A，并且同样被传递给我的 ParentComponent。但是，当我在选择过滤器 A 后选择过滤器 B 时，它只会在 handleFilterChange 方法中将过滤器 B（最新选择的值）传递给我的 ParentComponent。因此，handleFilterChange 方法中的过滤器参数将只有一个对象，即过滤器 B。我希望它具有过滤器 A 和过滤器 B。单独选择过滤器时，我的代码工作正常，但只有当我尝试同时选择两个过滤器时，它才不起作用。这里的任何建议都会有帮助。请注意，参数、过滤器和值都是对象。

【问题讨论】：

values 来自哪里？是否在ChildComponent 渲染中的任何地方使用过？

标签： reactjs react-hooks

【解决方案1】：

在您孩子的handleChange 函数中，您尚未将整组过滤器传递给父onChange。

在 reduce 中，您总是覆盖过滤器对象，而不是您需要合并值

更新代码

const handleChange = value => {
    console.log(values);// Shows all of the selected filters
    onChange({
      ...Object.keys(values).reduce((val, key) => (isEmpty(value[key]) ? val : { ...val, [key]: value[key] }), {}),
    });
  };

【讨论】：

很高兴有帮助:-)
是的，我会这样做的。因为，我刚刚投票，所以它要求在投票后等你 6 分钟。

【解决方案2】：

您可以使用 useState() 钩子根据之前的状态更新当前状态。

const [state, setState] = React.useState(default)

它采用您的状态的默认值。

React.useState() 返回一个数组，其中第一个值是存储状态值的变量，第二个是帮助更新值的函数。

您可以简单地调用将新值传递给它的函数来更新状态值。

【讨论】：

【解决方案3】：

在 ReactJs 组件中允许在组件状态更改时重新渲染组件。因此，当您从父组件更改过滤器时，您只需更新之前状态的状态 ReactJs 子组件会自动重新渲染调用。

以link here codesendbox.io或以上代码为例：

父组件

import React, {useState} from "react";
import "./styles.css";
import Children from "./Children";

export default function App() {

  const [filter, setFilter] = useState('A');

  const handleChange = e => setFilter(e.target.value);

  return (
    <>
      Filter:{" "}
      <select onChange={(e)=>handleChange(e)}>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <Children filter={filter} />
    </>
  );
}

子组件

import React from "react";

const Children = props => {
  return <h1>Children filder is : {props.filter}</h1>;
};
export default Children;

最后输出为：

注意：此答案仅适用于 ReactJS 中明确概念的父级和子级

==== 谢谢====

【讨论】：