我最近学习了如何在位于不同.js文件中的功能组件中传递道具。现在我在传递同一个.js文件中的函数组件时遇到了问题。
我想得到 member_id 从我的第一个函数中的get请求 GetMemID 用它来设定 member_id 在我的第二个函数中的使用状态 Transactions .
我知道我的get请求正在工作，因为我可以在检查代码后看到数据。
到目前为止，我的代码是“[object]”。
这是我目前的代码：

import React, { useEffect, useState } from 'react';
import moment from 'moment';
import  SigninNavBar from '../components/SigninNavBar.js';
import {BrowserRouter as Router, Switch, Route, Link, Redirect} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

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}) {

  const [error, setError] = useState(null);
  const [trans, setTrans] = useState({member_id, category:'', description:'', amount:0}); 
  const [details, setDetails] = useState({id:0, mmeber_id:0, group:"", username:""});

  //catch any changes made to member_id
  useEffect(() => {
    setTrans(trans => ({
      ...trans, 
      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://34.94.76.5/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">
        <SigninNavBar />
        <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">
                  <p>Category</p>
                  <input type="text" name="category" value={trans.category} onChange={e => setTrans({ ...trans, category: e.target.value })} />

                </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;