Использование withState и жизненного цикла из перекомпоновки вместе - PullRequest
Новая
       23

Использование withState и жизненного цикла из перекомпоновки вместе

0 голосов
/ 27 августа 2018

Я хотел бы создать компонент, который случайным образом обновляет числовые реквизиты на разных позициях на шахматной доске.

Для этого я создал простой компонент с интервалом:

JSFIDDLE: https://jsfiddle.net/ezxnjc8h/

export default class RandomPosition extends React.Component {
    constructor(props) {
        super(props)
        this.interval = null;
        this.state = {
            x: 0,
            y: 0
        }
    }

    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState({
                x: Math.floor(Math.random() * 8),
                y: Math.floor(Math.random() * 8)
            })
        }, 500)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        return <Test knightPosition={[this.state.x, this.state.y]} moveKnight={this.props.moveKnight} />
    }
}

Мне интересно преобразовать его в Hoc с использованием библиотеки перекомпоновки, используя для этого withState и lifecycle.

JSFIDDLE: https://jsfiddle.net/kzwc9yha/

export default compose(
    withState('knightPosition', 'moveKnight', [1,7]),
    lifecycle({
        componentDidMount() {
           this.interval = setInterval(() => {
               this.props.moveKnight[Math.floor(Math.random() * 8), Math.floor(Math.random() * 8)]
            }, 500)
        },
        componentWillUnmount() {
            clearInterval(this.interval)
        }
    })
)(Test)

1 Ответ

0 голосов
/ 27 августа 2018

В вашей скрипке есть несколько проблем.

Первый: вы не импортировали lifecycle из Recompose

Второй: moveKnight - это функция, и, следовательно, онадолжен вызываться как 

 this.interval = setInterval(() => {
         this.props.moveKnight(
             [Math.floor(Math.random() * 8), Math.floor(Math.random() * 8)]
         );
    }, 500)

Рабочая ДЕМО

...