Question

下面是我的代码：

function Profile() {
    const {userInfo} = useSelector(state => state.user);
    let user = {};

    useEffect(() => {
        const populateUserInfo = async () => {
            const {data} = await axios.get("api/users/" + userInfo._id);
            user = data

            // this line works if I comment out {user.shipping.address} in the "return" section.
            console.log(user.shipping.address) 
        }
        populateUserInfo();
    }, [])

    return <div>{user.shipping.address}</div>
}

我想在呈现之前从数据库中获取数据并将其存储到user变量中，但是在页面呈现时，发生了TypeError: Cannot read property 'address' of undefined。

我猜页面呈现时user变量仍然为空吗？谁能教我该怎么做？

Answer 1

使user处于状态并进行条件渲染。

最初，未设置user。

const [user, setUser] = useState(); // null

useEffect(
  () => {
    const populateUserInfo = async () => {
      const {data} = await axios.get("api/users/" + userInfo._id);
      setUser(data);
    }

    populateUserInfo();
  }
  , []
)

return (
  user ? (
    <div>{user.shipping.address}</div>
    : null
  );
);

Answer 2

截至目前，您仅在本地useEffect函数内更新用户变量。您还需要它才能在该功能之外进行更新。

为此，我建议改用useState。在函数外声明用户状态：

const [user, setUser] = useState({});

在配置文件功能中，替换：

let user = {};

使用：

setUser({});

然后在useEffect函数中，替换：

user = data;

使用：

setUser({data});

Answer 3

您也可以使用react standard async method并在此页面componentDidMount上获取示例。

类方法componentDidMount仅应在生命周期的开始运行。

class App extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			userData: null
        };
    }
    
    componentDidMount() {
    fetch(`https://jsonplaceholder.typicode.com/posts/42`)
      .then(res => res.json())
      .then(json => this.setState({ userData: json }));
    }
    
	render() {
		return (
            <div>
               {this.state.userData ? "user title: " + this.state.userData.title : "Waiting for user ..."} 
            </div>
		);
	}
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='container'></div>

Answer 4

您不能在async-await内使用useEffect()

相反，您可以使用它。

并且我编辑了部分代码。

function Profile() {
    const {userInfo} = useSelector(state => state.user);
    const [user, setUser] = React.useState({});
    async function populateUserInfo(){
       let user = {};
       const {data} = await axios.get("api/users/" + userInfo._id);
       setUser(data);
       console.log(data.shipping.address) 
    }
    useEffect(() => {
        populateUserInfo();
    }, [])

    return <div>{user.shipping.address}</div>
}

在React中渲染功能组件之前如何从数据库中获取数据？

4 个答案: