如何使用React钩子以当前状态和先前状态更新当前状态

Question

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

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方法中的filter参数将只有一个对象，即Filter B.我希望它具有Filter A和Filter B. 当分别选择过滤器时，我的代码可以正常工作，但是仅当我尝试选择两个过滤器时，它才无法工作。这里的任何建议都会有帮助。 请注意，参数，过滤器和值是对象。

Answer 1

在孩子的handleChange函数中，您没有将整个过滤器集传递给父级onChange。

在reduce里面，您总是覆盖filter对象，而您需要合并值

更新的代码

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] }), {}),
    });
  };

Answer 2

您可以使用useState（）挂钩根据先前的状态更新当前状态。

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

它采用您所在州的默认值。

React.useState（）返回一个数组，其中第一个值是用于存储状态值的变量，第二个是有助于更新值的函数。

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

Answer 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中清晰的概念父级和生成型

====谢谢====