问个jquery的白痴问题：如何输出object的值

Posted 2023-04-27

拿到一个jquery的object对象，事先如果不知道里面是什么，如何把它打印出来？能不能解析成json对象?能的话，如何解析？要在不知道里面是什么的情况下。

JSON2.js
JSON2.stringify(object)
ext.js
Ext.encode(object); 参考技术A json格式有数组和对象2种结构
数组用下标就可以得到，2个中括号括起来的是数组
对象就是用大括号括起来的，表现形式是key：value，key：value。。。的格式
这个只要对象.key就可以得到value本回答被提问者采纳 参考技术B 是通过ajax从后台获取到的object对象吗？追问

不管是不是，反正object是标准json格式，现在假如不知道object的属性的情况下，如何解析这个object

如何在 ReactJS 中的功能组件之间传递值 - 输出 [object Object]/undefined？

【中文标题】如何在 ReactJS 中的功能组件之间传递值 - 输出 [object Object]/undefined？

【英文标题】：How to pass values between functional components in ReactJS- output [object Object]/undefined?

【发布时间】：2021-08-02 10:22:36

【问题描述】：

我无法在同一个 .js 文件中的功能组件中传递道具。我之前尝试过发布此问题，但没有任何帮助。

我想在我的第一个函数 GetMemID 中从 GET 请求中获取 member_id，并使用它在我的第二个函数 Transactions 中设置我的 useState 的 member_id。

我知道我的 GET 请求正在运行，因为我能够在检查我的代码后看到数据。

到目前为止，使用我的代码，当我在 Transactions 中显示 member_id 时，我得到了“[object Object]”。

这是我目前的代码：

import React,  useEffect, useState  from 'react';
import  Redirect  from 'react-router-dom';
import moment from 'moment';
import  HomeNavBar from '../components/HomeNavBar.js';

var currentDate = moment().format("MM/DD/YYYY HH:mm:ss");

function GetMemID() 

  const [details, setDetails] = useState([]);  
  const [error, setError] = useState(null);

const options = 
  method: 'GET',
  headers: 
    'Content-type': 'application/json; charset=UTF-8',
    'Accept': 'application/json',
    'Authorization': `JWT $localStorage.getItem('token')`
  
;

useEffect(() => 
  fetch("http://########/api/members/get/", options)
  .then(response => 
    if (response.status !== 200) 
      console.log(response.status);
      setError(response);
    
    response.json().then(data => 
      setDetails(data);
    );
  );
, []);

  return (
    <div className="App">
      details.map(item => (
         <Transaction member_id=item.member_id />
      ))
    </div>
  );


function Transaction(member_id) 
//props.state
  const [error, setError] = useState(null);
  const [trans, setTrans] = useState(member_id:member_id, category:'', description:'', amount:0); 
  const [details, setDetails] = useState(id:0, mmeber_id:0, group:"", username:"");

  console.log("member_id: " + member_id);


//GET rerquest to get transaction memberID
  const options = 
    method: 'GET',
    headers: 
      'Content-type': 'application/json; charset=UTF-8',
      'Accept': 'application/json',
      'Authorization': `JWT $localStorage.getItem('token')`
    ,
  ;
  
  useEffect(() => 
    fetch("http://########/api/members/get/", options)
    .then(response => 
      if (response.status !== 200) 
        console.log(response.status);
        setError(response);
      
      response.json().then(data => 
        setDetails(data);
      );
    );
  , []);

  //POST request to API for transaction
  const optionPOST = 
    method: 'POST',
    headers: 
      'Content-type': 'application/json; charset=UTF-8',
      'Accept': 'application/json',
      'Authorization': `JWT $localStorage.getItem('token')`
    ,
    body:JSON.stringify(trans)
  

  const createTransaction = e => 
    e.preventDefault();

    fetch("http://########/api/transactions/post/", optionPOST)
    .then((response) => console.log('reponse: ' + response.json()))
    .then((message) => console.log('message: ' + message))
  

  if (error) 
    return (<Redirect to="/Signin" />);
   else
    return (
      <div className="wrapper">
        <HomeNavBar />
        <form>
          <div className="form-horizantal">
            <fieldset>
              <div className="form-group row">
                <label className="col-md-12"><p>currentDate</p></label>
              </div>
              
              <div className="form-group row">
                <label className="col-md-12">
                  <p>Member ID</p>
                  <input type="text" name="member_id" defaultValue=trans.member_id readOnly/>
                </label>
              </div>
              
              <div className="form-group row">
                <label className="col-md-12">
                  Select Category
                </label>
              </div>

              <div className="form-group row">
                <label className="col-md-12">
                  <select value=trans.category onChange=e => setTrans( ...trans, category: e.target.value ) >
                    <option value=""></option>
                    <option value="billsutilities">Bills/Utilities</option>
                    <option value="groceries">Groceries</option>
                    <option value="health">Health</option>
                    <option value="transportation">Transportation</option>
                    <option value="ehoppingentertainment">Shopping/Entertainment</option>
                    <option value="mics.">Mics.</option>
                  </select>
                </label>
              </div>

              <div className="form-group row">
                <label className="col-md-12">
                  <p>Description</p>
                  <input type="text" name="description" value=trans.description onChange=e => setTrans( ...trans, description: e.target.value ) />
                </label>
              </div>

              <div className="form-group row">
                <label className="col-md-12">
                  <p>Amount</p>
                  <input type="text" name="amount" value=trans.amount onChange=e => setTrans( ...trans, amount: e.target.value ) />
                </label>
              </div>
            </fieldset>

            <button type="submit" onClick=createTransaction>Submit</button>
          </div>
        </form>
      </div>
    );
  


export default Transaction;

【问题讨论】：

API 中的数据结构如何？

在<Transaction member_id=item.member_id />之前记录item的值

console.log("member_id: " + member_id);function Transaction(member_id) 下面的第四行在控制台中显示什么？

@kayuapi_my，它显示“member_id: undefined”

@WebbH，格式为 JSON。

【参考方案1】：

const [isLoading,setIsLoading] = useState(false)
useEffect(() => 
  fetch("http://########/api/members/get/", options)
  .then(response => 
    if (response.status !== 200) 
      console.log(response.status);
      setError(response);
    
    response.json().then(data => 
      setDetails(data);
      setIsLoading(true);
    );
  );
, []);

  return (
    <div className="App">
      isLoading && details.map(item => (
         <Transaction member_id=item.member_id />
      ))
    </div>

可能的解决方案是 -> 1 ) 因为我在上面的代码示例中使用了 isLoading 状态，它最初是 false 并在从 API 加载数据时设置为 true。并有条件地渲染 Transaction 组件。 2）为了更清楚地调试它，记录状态详细信息的值（以确保我们正确获取数据），类似这样 ->

useEffect(()=>
console.log(details);
,[details])

还要检查所有来自 API 的 JSON 数据的键是否正确。

如果对您有用，请分享您的评论。干杯！

【参考方案2】：

问题

将传递的道具存储到本地状态是 React 中的反模式。您遇到的问题是Transaction 已安装并呈现之前 GetMemID 中的 GET 请求解析并更新 details 状态。

解决方案 1

只需在Transaction 组件中直接使用传递的member_id 属性即可。 trans.member_id 只使用一次并且从未更新，因此它处于状态是没有意义的。

const [trans, setTrans] = useState( category:'', description:'', amount:0 );

...

<input type="text" name="member_id" defaultValue=member_id readOnly/>

解决方案 2

如果您真的绝对必须将member_id 存储到状态中，那么您需要使用依赖于道具值的useEffect 挂钩来更新状态。当传递的member_id 属性值更新时，效果回调将更新trans.member_id。

const [trans, setTrans] = useState(
  member_id,
  category:'',
  description:'',
  amount:0,
);

useEffect(() => 
  setTrans(trans => (
    ...trans,
    member_id
  ));
, [member_id]);

注意：这两种解决方案都假定您正确地获取和更新父组件中的details 状态。