我需要在React应用程序中获取当前用户的名称，因此我将数据从action / auth.js发送到Navbar.js，在Navbar中我得到了一个Promise，因此我要用户来获取数据。并且我设法console.log数据。但我无法使用它来向用户显示。这是我发送数据的auth.js函数：
export const get_user_data = () => async dispatch => {
if (localStorage.getItem('access')) {
const config = {
headers: {
'Content-Type': 'application/json',
'Authorization': `JWT ${localStorage.getItem('access')}`,
'Accept': 'application/json'
}
};
try {
const res = await axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config);
let name = res.data.first_name +" "+ res.data.last_name;
return name;
} catch (err) {
return err;
}
} else {
return "else accesss"
}
};这是我要显示数据的Navebar.js：
import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout, get_user_data } from '../actions/auth';
const Navbar = ({ get_user_data,logout, isAuthenticated}) => {
console.log("get_user_data", get_user_data().then(res=>{
console.log("res", res)}));
const get_name = () => (
get_user_data().then(res=> {return res})
);
const guestLinks = () => (
<Fragment>
<li className='nav-item'>
<Link className='nav-link' to='/login'>לכניסה</Link>
</li>
<li className='nav-item'>
<Link className='nav-link' to='/signup'>להרשמה</Link>
</li>
</Fragment>
);
const authLinks = () => (
<Fragment>
<li className='nav-item'>
<a className='nav-link' href='#!' onClick={logout}>ליציאה</a>
</li>
<li className='nav-item'>
<Link className='nav-link' to='/homepage'>העסק שלי</Link>
</li>
{<li className='nav-item'>
<Link className='nav-link'>ברוך הבא {get_name()}</Link>
</li>}
</Fragment>
);
return (
<nav className='navbar navbar-expand-lg navbar-light bg-light' lang="he" dir="rtl">
<Link className='navbar-brand' to='/'>החשמלאי</Link>
<button
className='navbar-toggler'
type='button'
data-toggle='collapse'
data-target='#navbarNav'
aria-controls='navbarNav'
aria-expanded='false'
aria-label='Toggle navigation'
>
<span className='navbar-toggler-icon'></span>
</button>
<div className='collapse navbar-collapse' id='navbarNav'>
<ul className='navbar-nav'>
<li className='nav-item active'>
<Link className='nav-link' to='/'>עמוד הבית <span className='sr-only'>(current)</span></Link>
</li>
{isAuthenticated ? authLinks() : guestLinks()}
</ul>
</div>
</nav>
);
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { logout, get_user_data })(Navbar);我使用get_name（）函数来解析来自promise的数据，但是仍然出现Promise错误。
反应错误：
react-dom.development.js：13231未捕获的错误：对象作为React子对象无效（找到：[object Promise]）。如果要渲染子级集合，请改用数组。
谢谢！
您得到的行为是因为您试图显示Promise。您需要等待Promise解析后才能显示它。在这里，我将使用useStateanduseEffect钩子来实现我正在谈论的行为。
首先，您需要一个状态来保存您的userData。根据get_user_data函数中的代码，让我们假设data我们正在谈论的是用户名。此状态的默认值为一个空字符串。
const [name, setName] = useState('');
然后，我将创建一个useEffect钩子，以使用您的get_user_data函数填充新创建的name状态：
useEffect(() => {
get_user_data().then((data) => {
setName(data);
});
}, []);
name当获取完成时，此挂钩将获取数据并设置状态。
然后，我们将需要在name任何需要的地方使用此状态。该组件的行为是''在获取用户名时将显示它，但是一旦数据可用，UI就会显示它。放在一起，我们有：
import React, { Fragment, useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout, get_user_data } from '../actions/auth';
const Navbar = ({ get_user_data,logout, isAuthenticated}) => {
const [name, setName] = useState('');
useEffect(() => {
get_user_data().then((data) => {
setName(data);
});
}, []);
const guestLinks = () => (
<Fragment>
<li className='nav-item'>
<Link className='nav-link' to='/login'>לכניסה</Link>
</li>
<li className='nav-item'>
<Link className='nav-link' to='/signup'>להרשמה</Link>
</li>
</Fragment>
);
const authLinks = () => (
<Fragment>
<li className='nav-item'>
<a className='nav-link' href='#!' onClick={logout}>ליציאה</a>
</li>
<li className='nav-item'>
<Link className='nav-link' to='/homepage'>העסק שלי</Link>
</li>
{<li className='nav-item'>
<Link className='nav-link'>ברוך הבא {get_name()}</Link>
</li>}
</Fragment>
);
return (
<nav className='navbar navbar-expand-lg navbar-light bg-light' lang="he" dir="rtl">
<Link className='navbar-brand' to='/'>החשמלאי</Link>
<button
className='navbar-toggler'
type='button'
data-toggle='collapse'
data-target='#navbarNav'
aria-controls='navbarNav'
aria-expanded='false'
aria-label='Toggle navigation'
>
<span className='navbar-toggler-icon'></span>
</button>
<div className='collapse navbar-collapse' id='navbarNav'>
<ul className='navbar-nav'>
<li className='nav-item active'>
<Link className='nav-link' to='/'>עמוד הבית <span className='sr-only'>(current)</span></Link>
</li>
{isAuthenticated ? authLinks() : guestLinks()}
</ul>
</div>
</nav>
);
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { logout, get_user_data })(Navbar);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句