DB
можете подсказать почему возвращает промис вместо массива?
тебе нужно loadData сделать отдельно, например в useEffect, подождать ответ от сервера и закинуть результат в редюсер
Size: a a a
2020 September 25
BB
Зря ты с async await начал
Под капотом это промис
СЛ
Dmitry Bondar
тебе нужно loadData сделать отдельно, например в useEffect, подождать ответ от сервера и закинуть результат в редюсер
Делал, и заганял в стэйт, но стэйт тоже промис возвращал
DB
Делал, и заганял в стэйт, но стэйт тоже промис возвращал
значит «не ждал» пока промис разрешится а загонял сам промис
BB
Дропни второй аргумент в useReducer, замени на пустой массив, а не на вызов функции, которая вернет промис
DB
загоняй в reducer/state после await или then
DB
тебе надо сделать
const result = await loadData();
а потом уже в reducer/state
const result = await loadData();
а потом уже в reducer/state
DG
Делал, и заганял в стэйт, но стэйт тоже промис возвращал
useEffect(() => {
const res = await axios.get();
dispatch({ type: "LOAD_DATA", data: res });
}, []);ГФ
Dmitry Bondar
проблема, в том что плеер есть да, стили все есть, но но не врубался, я почитал доки и нашел свойство. player.play()
ГФ
ну и вот что из этого вышло
import ReactReact, {Component} from 'react'
import './ZNO.css'
import { connect } from 'react-redux'
import {Player,
PosterImage,
BigPlayButton,
LoadingSpinner,
ControlBar,
VolumeMenuButton,
PlayToggle} from 'video-react';
import "video-react/dist/video-react.css";
export default class ZNO extends ReactReact.Component {
constructor() {
super();
this.play = this.play.bind(this);
}
play()
{
this.player.play();
}
render() {
return (
<div className="ZNO">
<div className="container">
{/*<h1 className="head-text">{lan.head}</h1>*/}
<div className="zno-padd-block padd-block">
{/*<h3 className="padd-block-head">{lan.text}</h3>*/}
<div className="video-zno">
<div className="video">
<Player
ref={player => {
this.player = player;
}}
playsInline
autoPlay
src="https://www.youtube.com/video"
>
<LoadingSpinner />
<ControlBar autoHide={false} />
<VolumeMenuButton />
<PlayToggle />
<BigPlayButton onClick={this.play} position="center" />
</Player>
</div>
</div>
</div>
</div>
</div>
)
}
}DB
useEffect(() => {
const res = await axios.get();
dispatch({ type: "LOAD_DATA", data: res });
}, []);это не будет работать useEffect не может быть асинхронным
BB
Нет. Там надо оборачивать в вызов анонимки
DB
ну да
DG
useEffect(() => {
(async () => {
// тут код
})();
}DB
useEffect(() => {
(async () => {
// тут код
})();
}ну так это не асинхронный useEffect )
DG
꧁岡
ну и вот что из этого вышло
import ReactReact, {Component} from 'react'
import './ZNO.css'
import { connect } from 'react-redux'
import {Player,
PosterImage,
BigPlayButton,
LoadingSpinner,
ControlBar,
VolumeMenuButton,
PlayToggle} from 'video-react';
import "video-react/dist/video-react.css";
export default class ZNO extends ReactReact.Component {
constructor() {
super();
this.play = this.play.bind(this);
}
play()
{
this.player.play();
}
render() {
return (
<div className="ZNO">
<div className="container">
{/*<h1 className="head-text">{lan.head}</h1>*/}
<div className="zno-padd-block padd-block">
{/*<h3 className="padd-block-head">{lan.text}</h3>*/}
<div className="video-zno">
<div className="video">
<Player
ref={player => {
this.player = player;
}}
playsInline
autoPlay
src="https://www.youtube.com/video"
>
<LoadingSpinner />
<ControlBar autoHide={false} />
<VolumeMenuButton />
<PlayToggle />
<BigPlayButton onClick={this.play} position="center" />
</Player>
</div>
</div>
</div>
</div>
</div>
)
}
}DB
ты просто из него вызываешь асинзронную функию)
DB
это и имеется в виду - ему надо так сделать