如何在ReactJS-output[objectObject]中的功能组件之间传递值

Question

我最近学会了如何在位于不同.js文件中的功能组件中传递道具。现在，在同一.js文件中的函数组件中传递prop时遇到了问题。

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

我知道我的GET请求正在工作，因为我可以在检查代码后看到数据。

到目前为止，我的代码是"；[对象对象]"；。

这是我迄今为止的代码：

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;

Answer 1

问题

您正在React中呈现一个在JSX中无效的对象。您正在传递看起来是一个值：

<Transaction state={item.member_id} />

但当设置初始状态值时，将其打包到Tranaction中的对象中：

function Transaction({ state }) {
...
const [trans, setTrans] = useState({
member_id: { state }, // <-- packed prop value into object
category:'',
description:'',
amount:0,
});

因此，当渲染输入时，您将传递一个对象作为输入的默认值：

<input
type="text"
name="member_id"
defaultValue={trans.member_id} // <-- object value!!
readOnly
/>

解决方案

state是item.member_id值，因此无需将其打包到对象中。由于父级中的状态是异步更新的，因此您需要对组件更新做出反应。使用CCD_ 8钩子"；手表；有关CCD_ 9道具的更改。

function Transaction({ state }) {
...
const [trans, setTrans] = useState({
member_id: state, // <-- set as passed prop value
category:'',
description:'',
amount:0,
});
useEffect(() => {
setTrans(trans => ({
...trans, // <-- copy previous state
member_id: state, // <-- update member_id from props
}));
}, [state]);

我建议更准确地命名道具，即将其命名为member_id，然后设置初始状态会更干净一些。

<Transaction member_id={item.member_id} />

function Transaction({ member_id }) {
...
const [trans, setTrans] = useState({
member_id, // <-- set as passed prop value via object shorthand notation
category:'',
description:'',
amount:0,
});
useEffect(() => {
setTrans(trans => ({
...trans, // <-- copy previous state
member_id, // <-- update member_id from props
}));
}, [member_id]);