React Todo App - 道具的类型与我预期的不一样

Question

我正在构建 React Todo 应用程序。但是，我不明白todos的类型怎么变成了object?，在App.js中，我们给它设置了一个数组。在Form.js我们设置
setTodos([...todos, { text: inputText, id: Math.random() * 1000 }]); 我不明白这一行是怎么回事。你能帮忙吗？

App.js

import React, { useState } from "react";
import "./App.css";
//Importing Components
import Form from "./components/Form";
import TodoList from "./components/TodoList";

function App() {
 const [inputText, setInputText] = useState("");
 const [todos, setTodos] = useState([]);
 return (
   <div className="App">
     <header>
       <h1>Hitay's Todo List</h1>
     </header>
     <Form
       todos={todos}
       setTodos={setTodos}
       inputText={inputText}
       setInputText={setInputText}
     />
     <TodoList todos={todos} />
   </div>
 );
}

export default App;

Form.js

import React from "react";

const Form = ({ inputText, setInputText, todos, setTodos }) => {
 //Here I can write JavaScript code and Function
 const inputTextHandler = (e) => {
   setInputText(e.target.value);
 };
 const submitTodoHandler = (e) => {
   e.preventDefault();
   setTodos([...todos, { text: inputText, id: Math.random() * 1000 }]);
   setInputText("");
 };
 return (
   <form>
     <input
       value={inputText}
       onChange={inputTextHandler}
       type="text"
       className="todo-input"
     />
     <button onClick={submitTodoHandler} className="todo-button" type="submit">
       <i className="fas fa-plus-square"></i>
     </button>
   </form>
 );
};

export default Form;

TodoList.js

import React from "react";
//Import Components
import Todo from "./Todo";

const TodoList = ({ todos }) => {
  console.log(typeof todos); //object??
  return (
    <div className="todo-container">
      <ul className="todo-list"></ul>
    </div>
  );
};

export default TodoList;

Answer 1

嗯，它按预期工作，因为 javascript 中的 typeof 数组是一个对象。

根据this link：

This because in javascript all derived data type is always a type object. Included functions and array.

如果你想检查一个变量是否是数组，你可以使用Array.isArray如下：

Array.isArray(todos);

Answer 2

待办事项是对象数组。但是一个待办事项就是一个对象。待办事项通常看起来像这样；

 todos = [
{ text: "work", id: 12314 },
{ text: "eat", id: 12321414 },
{ text: "drink", id: 12311234 },
]

您在那里显示的行 setTodos([...todos, { text: inputText, id: Math.random() * 1000 }]); 您正在获取所有待办事项并使用展开运算符 (...todos) 展开到新数组中。然后在其中添加新的待办事项。

React Todo App - 道具的类型与我预期的不一样

React Todo App - typeof a props is not as I expect

object

jsx

reactjs

react-props