Javascript

Question

我有一个通过道具传递的对象。 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.logs

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.props:

export function TodoItem(props){

解决此问题的一种方法是使用解构来分配 props.props。到名为 props:

的变量

export function TodoItem({ props }){

或者，考虑重命名道具以减少混淆：

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

Answer 2

您好，因为您的对象层多了一层。

你可以像({ props })一样使用destructuring assignment传递参数，或者像下面的例子一样使用

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']);

Javascript - 反应。对象的现有属性显示未定义

Javascript - React. Object's existing property shows undefined

parameters

reactjs

Javascript - 反应。对象的现有 属性 显示未定义

Javascript - React. Object's existing property shows undefined

javascript

parameters

reactjs

Javascript - 反应。对象的现有属性显示未定义