Javascript - 反應。 對象的現有屬性顯示未定義

Question

我有一個通過道具傳遞的 object。 我可以正確地console.log object，但是當我嘗試console.log屬性時，它們顯示為undefined

TodoList.js

import React from 'react';
import {TodoItem} from './TodoItem.js';

export function TodoList({todos}){
    return (
        <ul>
            {
                todos.map(
                    function(campos){
                        console.log('list.texto: ', campos.texto);
                        return(
                            <TodoItem props={campos} />
                        );
                    }
                )
            }
        </ul>
    );
}

TodoItem.js。 查看console.log

import React from 'react';

export function TodoItem(props){
  console.log('item: ', props);
  console.log('item.texto1: ', props.texto);
  console.log('item.texto2: ', props["texto"]);
  return (
    <li>
      <h4>Estado</h4>
      <p>{props["estado"]}</p>
      <h4>Fecha Apertura</h4>
      <p>{props["fechaApertura"]}</p>
      <h4>Texto</h4>
      <p>{props["texto"]}</p>
    </li>
  );
}

項目呈現“正常”但為空，代碼記錄以下內容：

> list.texto:  "Muestra" TodoList.js:10

> item: TodoItem.js:4
  Object {
  "props": {
    "estado": 0,
    "fechaApertura": "2000-01-01",
    "fechaCierre": "2020-01-01",
    "texto": "Muestra"
  }
}

> item.texto1:  undefined TodoItem.js:5

> item.texto2:  undefined TodoItem.js:6

為什么他的屬性未定義？ 提前致謝。

Answer 1

你有兩個不同的東西，你命名為props 。 首先，您傳入一個名為props的單獨道具：

<TodoItem props={campos} />

但是在接收端， props是整個 props object。 您傳入的值將在props.props上：

export function TodoItem(props){

解決此問題的一種方法是使用解構來分配 props.props。 到一個名為props的變量：

export function TodoItem({ props }){

或者，考慮重命名道具以減少混淆：

<TodoItem item={campos} />
// ...
export function TodoItem({ item }){

Answer 2

嗨，因為您的 object 層還有一層。

您可以使用({ props })之類的解構賦值傳遞參數，也可以使用以下示例

 const props = { "props": { "estado": 0, "fechaApertura": "2000-01-01", "fechaCierre": "2020-01-01", "texto": "Muestra" } } console.log('item: ', props); console.log('item.texto: ', props['props']['texto']);