更新数组使用状态反应钩子(下一个.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 将返回以前的状态值，因为组件尚未刷新。请看这里的例子：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>
</>
);
}

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

Answer 2

https://codesandbox.io/s/next-js-infinite-scroll-3vfem?file=/pages/Content.js

我从上面的演示中向这个函数添加了一行

const getMorePost = async () => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/todos?_start=${posts.length}&_limit=20`
);
const newPosts = await res.json()
setHasMore(!!newPosts.length)
setPosts((post) => [...post, ...newPosts])
}

现在滚动完成确定。