Reactjs 对应用程序作出反应-道具的类型与我预期的不同

我正在构建React Todo应用程序。然而，我无法理解todos类型如何变成对象？在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;

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;

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;

import React，{useState}来自“React”；
导入“/App.css”；
//导入组件
从“/components/Form”导入表单；
从“/components/TodoList”导入TodoList；
函数App（）{
常量[inputText，setInputText]=useState（“”）；
const[todos，setTodos]=useState（[]）；
返回(
Hitay的待办事项清单
);
}
导出默认应用程序；

Form.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;

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;

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;

从“React”导入React；
常量形式=（{inputText，setInputText，todos，setTodos}）=>{
//在这里，我可以编写JavaScript代码和函数
常量inputExtHandler=（e）=>{
setInputText（即目标值）；
};
常量submitTodoHandler=（e）=>{
e、 预防默认值（）；
setTodos（[…todos，{text:inputText，id:Math.random（）*1000}]）；
setInputText（“”）；
};
返回(
);
};
导出默认表单；

TodoList.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;

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;

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;

从“React”导入React；
//导入组件
从“/Todo”导入Todo；
const TodoList=（{todos}）=>{
console.log（todos的类型）；//对象？？
返回(

);
};
将默认值导出到列表；
好吧，它按照预期工作，因为javascript中的数组类型是一个对象

根据：

这是因为在javascript中，所有派生数据类型始终是一个类型
对象包括函数和数组

如果要检查变量是否为数组，可以使用
array.isArray
如下：

Array.isArray(todos);

TODO是一个对象数组。但一个单独的todo是一个对象。待办事项通常是这样的

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


您在那里显示的行
setTodos（[…todos，{text:inputText，id:Math.random（）*1000}]）
您将获得所有TODO并使用spread Operator（
…TODO
）将其扩展到新阵列中。然后在其中添加新的todo。
todo是对象数组。但一个单独的待办事项是对象，你们不完全理解哪一部分？你能澄清一下吗？谢谢，现在我明白了。特伊克尔·伊迪约伦：）嗨！对不起打扰了。但typeof（todos）不是对象，因为它是一个对象数组。js中所有数组（即使是空数组）的类型都是ObjectSPL检查此链接（）。如您所见，即使空数组的类型也是
object
。因为它不是一个primitive@alisasani是的，但她并没有问这个问题，她认为TODO将成为一个对象作为一个状态，而他们最初将其设置为一个数组。但事实并非如此。你所说的有点深奥question@hitayco快乐编码，rica ederim:）哦，是的，我忘了，谢谢你的评论！！