将状态钩初始化为[]仍将类型显示为未定义
将状态钩初始化为[]仍将类型显示为未定义
提问于 2022-07-20 06:23:05
代码：
const [input, setInput] = useState('');
const [studentList, setStudentList] = useState([]);
useEffect(() => {
console.log(studentList)
console.log(studentList.type)
}, [studentList]);
return (
<div id="add-students-input-div">
<input
type="text"
id='add-students-input'
value={input}
placeholder='Enter a student to the database'
onChange={(event) => {
setInput(event.target.value)
}}
/>
<div id="add-students-button" onClick={() => {
setStudentList([document.getElementById('add-students-input').value, ...studentList])
setInput('')
}}>
<p>Add</p>
</div>
</div>
)问题： studentList的print语句正在返回数组，但是studentList.type的print语句在任何时候都是未定义的，甚至在元素被添加到数组之后也是如此。
如何确保studentList.type返回Array。
回答 3
Stack Overflow用户
发布于 2022-07-20 06:31:36
代码中的studentList将永远是数组，初始化状态时为空。如果要检查数组中是否存在某些内容，则必须使用studentList.length
Stack Overflow用户
发布于 2022-07-20 07:40:08
正如注释中提到的，数组没有type 属性。
您的studentList状态值是，总是数组；不需要检查它的类型。
当您单击按钮( studentList )时，您做的一件事似乎不正确，那就是更新studentList。简而言之，您真的不需要在React中使用DOM方法。
若要使用来自input状态的值更新数组，请使用以下.
const handleClick = () => {
setStudentList((prev) => [input, ...prev]);
setInput("");
};和
<div id="add-students-button" onClick={handleClick}>
<p>Add</p>
</div>有关如何使用useState -功能更新的信息，请参阅setStudentList()
Stack Overflow用户
发布于 2022-07-20 08:35:33
除了以前的投稿人通过消除其他地方的问题来解决你的问题，我想回答如下：
如何确保studentList.type返回数组
如果要确保变量是数组，可以使用数组的isArray()静态方法：
Array.isArray(studentList) // returns true if array or false if not页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73046821
复制相关文章
相似问题
腾讯云开发者
