Question

console.log(detailtext)告诉我对象的数据在那里，道具似乎起作用了，但是我无法显示对象的属性。为什么？

这是一个非常简单的组件：

import React from "react";
import { Link } from "react-router-dom";

class LibraryTextDetails extends React.Component {
  render() {
    const detailtext = this.props.detailview || {};
    console.log("THIS IS THE DETAILTEXT");
    console.log(detailtext);
    const detailviewIds = detailtext.id;
    console.log("THIS IS THE DETAILVIEW ID");
    console.log(detailviewIds);

    return (
      <div>
        <div className="covercard">
          <img
            src={detailtext.lead_image_url}
            width={157}
            className="coverdetailimage"
          />
        </div>
        <div className="titledetailcard">{detailtext.title}</div>
        <div className="authordetailcard">{detailtext.author}</div>
      </div>
    );
  }
}

export default LibraryTextDetails;

这里是console.log：

Answer 1

我要说，鉴于detailtext是一个需要替换的数组

            JsonArrayRequest request = new JsonArrayRequest(Request.Method.GET, AppController.getInstance().getURL(AppConst.TAG_URL_CHECK_UNPAID_TICKETS).equals("") ? AppConst.URL_CHECK_UNPAID_TICKETS : AppController.getInstance().getURL(AppConst.TAG_URL_CHECK_UNPAID_TICKETS), null, new Response.Listener<JSONArray>() {
            @Override
            public void onResponse(JSONArray response) {
                Log.i(TAG,"user id -> "+AppController.getInstance().getPrefManager().getUserId());
                Log.w(TAG,"ticket check response -> "+response.toString());
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e(TAG,"processUnpaidTicket() volley -> "+error.toString());
            }
        }){
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                Map<String,String> params = new HashMap<>();
                params.put(AppConst.TAG_USER_ID, AppController.getInstance().getPrefManager().getUserId());//add user id to request
                return params;
            }
        };

作者

  const detailviewIds = detailtext.id;

...但是我在您的屏幕截图中看不到该ID。它是现有财产吗？

Answer 2

你错过了重要的事情

const detailviewIds = detailtext[0].id;是对象数组

当您在detailtext中看到时，表示它是一个对象的数组

log [{ ... }]还会在

下的数组中显示第一个对象

因此正确使用将是

log

和类似或使用代理变量或修复将数据发送到此组件的方式不是数组而是一个对象（数组中的第一个对象）

Answer 3

您正在将数组作为detailview传递到组件。您在控制台中看到的数据是数组中第一个对象的数据。确保渲染detailview[0]，并且可以正常工作。

示例

class LibraryTextDetails extends React.Component {
  render() {
    const { detailview } = this.props;
    const detailtext = (detailview && detailview[0]) || {};

    return (
      <div>
        <div className="covercard">
          <img
            src={detailtext.lead_image_url}
            width={157}
            className="coverdetailimage"
          />
          <div className="titledetailcard">{detailtext.title}</div>
          <div className="authordetailcard">{detailtext.author}</div>
        </div>
      </div>
    );
  }
}

React-尝试呈现对象的属性，尽管它保持“未定义”

3 个答案: