如何使用 React Hooks 用当前状态和先前状态来更新当前状态
在我的 React 应用程序中，我有一个父组件和一个子组件。在我的父组件中，我包含了来自子组件的过滤器。无论我从过滤器中选择什么值，我都会将其传递给我的 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。 当单独选择过滤器时，我的代码可以正常工作，但只有当我尝试选择两个过滤器时，它才不起作用。这里的任何建议都会很有帮助。 请注意，参数、过滤器和值都是对象。
在子级的
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] }), {}),
});
};
您可以使用 useState() 钩子根据先前的状态更新当前状态。
const [state, setState] = React.useState(default)
它采用您状态的默认值。
React.useState() 返回一个数组，其中第一个值是用于存储状态值的变量，第二个值是帮助更新该值的函数。
您可以简单地调用该函数并将新值传递给它来更新状态值。
在 ReactJs 中，当组件状态改变时，允许重新渲染组件。因此，当您从父组件更改过滤器时，您只需更新状态，ReactJs 子组件会自动重新渲染调用的状态。
例如此 链接这里 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 中的 child
==== 谢谢 ====