如何在每次渲染之前重置 UseEffect React Hooks 中的数据？答案

【问题标题】：How to reset data in UseEffect React Hooks before each rendering?如何在每次渲染之前重置 UseEffect React Hooks 中的数据？
【发布时间】：2020-01-29 10:31:22
【问题描述】：

情况是这样的。我使用useEffect 过滤一些数据，它运行良好。这是代码和codesandbox。

const data = [
  {name: 'aml', age: 10},
  {name: 'abcb', age: 12},
  {name: 'asr', age: 20},
  {name: 'plo', age: 30},
  {name: 'bvcq', age: 15},
  {name: 'bfro', age: 21},
  {name: 'zxwh', age: 19}
]

function App() {
  const [keyword, setKeyword] = React.useState('')
  const [result, setResult] = React.useState(data)
  const [isAged, setIsAged] = React.useState(false) 
  const [isNameLength3, setIsNameLength3] = React.useState(false)
  React.useEffect(() => {
    const doSearch = () => {
      // setResult(data)
      if (isAged) {
        setResult(result.filter(item => item.age >= 20))
      }
      if (isNameLength3) {
        setResult(result.filter(item => item.name.length === 3))
      } 
      if (keyword) {
        setResult(result.filter(item => item.name.toLowerCase().includes(keyword.toLowerCase())))
      } 
    }
    doSearch() 
  }, [isAged, keyword, isNameLength3, result])
  return (
    <div className="App">
      <input
        value={keyword}
        type='text'
        onChange={(e) => setKeyword(e.currentTarget.value)}
        placeholder='search...' />
      <br/>
      <label>
        <input
          onChange={() => setIsAged(!isAged)}
          type='checkbox'
          checked={isAged} />
        <span>Age >= 20</span>
      </label>
      <label>
        <input
          onChange={() => setIsNameLength3(!isNameLength3)}
          type='checkbox'
          checked={isNameLength3} />
        <span>NameLength3</span>
      </label>
      <div className="result">
        {
          result && result.length > 0 && 
            result.map((item, index) =>
              <p key={'result' + index}>{item.name} -> {item.age}</p>
            )
        } 
      </div>
    </div>
  )
}

result 每次更改搜索关键字或复选框时都会更改。但没有办法回去。

例如，我选中了两个复选框，结果将是：

asr -> 20

plo -> 30

现在我输入a，结果变成了

asr -> 20

问题是，当我删除a时，我想要一个结果

asr -> 20

plo -> 30

我知道result 正在被删除，但我该如何实现呢？

我认为它应该搜索是否使用原始数据更改了任何过滤器（复选框和关键字）。

所以我在 useEffect 钩子的一开始就尝试了这个。

setResult(data)

但不幸的是，它没有按我的预期工作。

感谢任何帮助！

【问题讨论】：

由于您的data 变量在您之外App，您只需将useEffect 中的所有result 替换为data，因此每次使用原始数据时计算最终结果。

标签： javascript reactjs ecmascript-6 react-hooks ecmascript-2016

【解决方案1】：

首先对完整数据运行过滤器。

仅使用三个过滤规则中的过滤数据设置结果。

let filteredResult = data.filter(
  item =>
    (!isAged || item.age >= 20) &&
    (!isNameLength3 || item.name.length === 3) &&
    (!keyword || item.name.toLowerCase().includes(keyword.toLowerCase()))
);

setResult(filteredResult);

See working sandbox

【讨论】：

应该这样做！ :)
@SPG 很高兴为您提供帮助！