function Following(){
follow_render().then((value)=>{
console.log(value)
});
return(
<div className="Following">
<div className="Following_box_flex">
<div className="Following_box">
<div className="user_icon"><img src="img/icon _user_.svg" alt="icon _user_" className='user_icon_image'/></div>
<div className="Following_text">Following</div>
</div>
<div className="user_plus_icon"><img src="img/icon _user plus_.svg" alt="icon _user plus_" className='user_plus_icon_image'/></div>
</div>
<div className="scrollbox" id="friend_box">
</div>
</div>
);
}
follow_render is a async function and I want to get value(type:Object) from follow_render and put into the class named "scrollbox". But error occurs again, and I don't know how to solve it. Is it possible to put the variable named "value" into the React Componenet? If it is possible, how do i solve this problem? (Following() is a React component)
CodePudding user response:
You can create a state that start with a null value:
const [state, setState] = React.useState(null);
And put state into "scrollbox" div:
<div className="scrollbox" id="friend_box">
{state}
</div>
And after follow_render() ends the execution, you can set the variable "value" into your state:
follow_render().then((value) => {
setState(value);
});
When you set a new value into your state, your component will rerender and the your "scrollbox" div will show the new state value.
To avoid rerenders, I recommend you put the follow_render() function, into a useEffect with a empty array dependency, so that it runs only on component mount:
React.useEffect(() => {
follow_render().then((value)=>{
console.log(value)
});
}, []);
In the end, your component will appear like this:
function Following(){
const [state, setState] = React.useState(null);
React.useEffect(() => {
follow_render().then((value) => {
console.log(value);
setState(value);
});
}, []);
return(
<div className="Following">
<div className="Following_box_flex">
<div className="Following_box">
<div className="user_icon"><img src="img/icon _user_.svg" alt="icon _user_" className='user_icon_image'/></div>
<div className="Following_text">Following</div>
</div>
<div className="user_plus_icon"><img src="img/icon _user plus_.svg" alt="icon _user plus_" className='user_plus_icon_image'/></div>
</div>
<div className="scrollbox" id="friend_box">
{state}
</div>
</div>
);
}