javascript - 更新数组 useState react 钩子(Hook)(Next.js)

Question

我正在尝试更新我的“状态”数组并使用“setState”将字符串类型的项目插入其中，但它不起作用。
我知道它不适用于 push()。
我还尝试使用扩展运算符更新我的“状态”数组，但它也不起作用。
这是我的代码:

import React, { useState } from 'react';
import _, { debounce } from 'lodash';


export default function Search() {

  const [state, setState] = useState([])

  const handleChange = debounce(async (value) => {
    const url = `http://localhost:3100/`
    if (value == '') {
      return
    }
    let response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify({ value })
    })

    let test = await response.json()
    console.log(test)

    setState(state.concat(test))
    // setState([...state, test]) it also doesn't work
    console.log(state)    
  }, 1000)

  return (
    <>
      <div>
        <input onChange={e => handleChange(e.target.value)} />
      </div>
    </>
  )
}

“状态”数组保持为空。我需要了解为什么。

Answer 1

1.) 更改if(value == '')至if(value ==='')
2.) console.log(state)在您的 setState 将返回之前的 state 值之后，因为组件尚未刷新。看这里的例子:https://codesandbox.io/s/friendly-ives-vvo13?file=/src/App.js:103-474并输入一些内容并查看控制台。然后输入其他内容并查看控制台。您将看到控制台正在显示您之前输入的状态。但是，如果您查看返回中呈现的 {state}，它将显示当前状态。

    export default function App() {
  const [state, setState] = useState([]);

  const handleChange = debounce(async value => {
    let test = ["cars", "boat", "bike"];

    setState([...test, value]);
    console.log(state);
  }, 1000);

  return (
    <>
      <div>
        {state}
        <input onChange={e => handleChange(e.target.value)} />
      </div>
    </>
  );
}

所以你正在设置状态，只是在错误的地方访问/读取它。