初始化为[]的React State Hook仍然显示未定义的类型

Question

代码：

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。

Answer 1

studentList在您的代码中将永远是一个数组，在初始化状态时为空。如果你想检查阵列中是否有东西，你必须使用studentList.length

Answer 2

尽管以前的贡献者通过在其他地方消除问题来解决您的问题，但我想回答这个问题：

如何确保studentList.type返回Array

如果你想确保你的变量是一个数组，你可以使用array:的isArray()静态方法

Array.isArray(studentList) // returns true if array or false if not

Answer 3

如注释中所述，数组没有type属性。

您的studentList状态值是始终一个数组；不需要检查其类型。

当您单击按钮(<div>)时，有一件事似乎做得不正确，那就是更新studentList。简而言之，您真的不需要在React中使用DOM方法。

要使用input状态的值更新数组，请使用。。。

const handleClick = () => {
setStudentList((prev) => [input, ...prev]);
setInput("");
};

和

<div id="add-students-button" onClick={handleClick}>
<p>Add</p>
</div>

有关如何使用setStudentList()的信息，请参阅useState-功能更新