[英]updating array useState react hooks (Next.js)
我正在尝试更新我的“状态”数组并使用“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>
</>
)
}
“状态”数组保持为空。 我需要了解为什么。
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。 但是,如果您查看返回内部呈现的 {state},它将显示当前的 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>
</>
);
}
因此,您正在设置 state,只是在错误的位置访问/读取它。
https://codesandbox.io/s/next-js-infinite-scroll-3vfem?file=/pages/Content.js
我从上面的演示中向这个 function 添加了一行
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])
}
现在滚动完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.