React组件无法渲染数组长度问题求助（附完整代码）

问题场景 #

在React开发中，使用useState Hook存储数组数据，尝试通过TodoList子组件渲染该数组的长度，但内容未成功渲染。

相关代码 #

App.js #

import React, { useState } from 'react'
import TodoList from './TodoList'

function App() {
  const [todos, setTodos] = useState(['test1', 'test2'])
  return (
    <>
      <TodoList todos={todos} />
      <input type="text" />
      <button>Add Todo</button>
      <button>Clear Completed Todos</button>
      <div>0 left to do</div>
    </>
  )
}

export default App;

TodoList.js #

import React from 'react'

export default function TodoList(todos) {
    return (
        <div>
            {todos.length}
        </div>
    )
}

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

错误原因 #

React组件的第一个参数是包含所有传入属性的props对象，而非直接传入的单个属性值。当前TodoList组件中，todos参数实际是props对象，而非传入的数组，因此访问todos.length得到的是props对象的属性数量（此处仅1个属性），而非目标数组的长度。

修正方案 #

有两种方式可以正确获取数组：

方式1：解构props #

直接从props对象中解构出todos属性：

import React from 'react'

export default function TodoList({ todos }) {
    return (
        <div>
            {todos.length}
        </div>
    )
}

方式2：通过props对象访问 #

保留props参数，通过props.todos获取数组：

import React from 'react'

export default function TodoList(props) {
    return (
        <div>
            {props.todos.length}
        </div>
    )
}

修正后，TodoList组件即可正确渲染数组的长度（此处为2）。

内容的提问来源于stack exchange，提问作者Dor