Неправильная визуализация компонента при использовании Math.random в setState в React Component

Question

Цель состоит в том, чтобы отобразить элемент из списка объектов, но при каждом обновлении страницы элемент должен выбираться случайным образом из списка. Вот, Testimonials это список, и я хочу отобразить любой случайный элемент из этого списка. Если я использую константу, она отлично работает. Когда я использую случайную функцию, она не отображает правильное изображение с соответствующим сообщением элемента.

Я использую React 16, Next.js, стилизованные компоненты в качестве технологии.

Проблема в рендеринге раздела "Сотрудники". Консоль отображает предупреждение как

warning.js?6327:33 Warning: PropЦСИdid not match. Server: "/static/images/testimonials/2.jpg" Client: "/static/images/testimonials/5.png"

Вот кусок моего кода

import {Component} from 'react';

import Row from '../../../common-util/row';
import Col from '../../../common-util/col';

import {Container, Content, Image, StyledCol, Statement, Title, Designation, Heading, Arrow} from './styles';

const Testimonials = [{
    name: 'ACX',
    role: 'XYZ',
    image: '/static/images/testimonials/1.jpeg',
    message: 'KL DSAD E'
}, {
    name: 'HJK',
    role: 'Growth Hacker',
    image: '/static/images/testimonials/2.jpg',
    message: 'JKLASD ASDA'
}, {
    name: 'ZXCV',
    role: 'Product Manager',
    image: '/static/images/testimonials/3.jpg',
    message: 'KKK'
}, {
    name: 'UIP',
    role: 'Data Integrity',
    image: '/static/images/testimonials/4.JPG',
    message: 'LOPO'
}, {
    name: 'NMa',
    role: 'Sales Evangelist',
    image: '/static/images/testimonials/5.png',
    message: 'KK D D D'
}];

export default class Employees extends Component {

    constructor(props) {
        super(props);
        this.state = {
            currentIndex: parseInt((Math.random()*10))%5,
        };
    }

    render() {
        let {currentIndex} = this.state;
        return (
            <Container>
                <Content>
                    <Title>Our employees say...</Title>
                </Content>
                <Row>
                    <Col xs={1} sm={1} md={2} lg={2}>
                        <Arrow className={currentIndex === 0 ? 'disabled' : ''} onClick={this.handleClick.bind(this, 'DECREMENT')}>{'<'}</Arrow>
                    </Col>
                    <Col xs={10} sm={10} md={8} lg={8}>{this.currentItem(currentIndex)}</Col>
                    <Col xs={1} sm={1} md={2} lg={2}>
                        <Arrow className={currentIndex === Testimonials.length - 1 ? 'disabled' : ''} onClick={this.handleClick.bind(this, 'INCREMENT')}>{'>'}</Arrow>
                    </Col>
                </Row>
            </Container>
        );
    }

    currentItem(currentIndex) {
        const item = Testimonials[currentIndex];
        return (
            <Row>
                <StyledCol xs={4} md={4} lg={3}>
                    <Image src={item.image} alt={item.name} />
                </StyledCol>
                <Col xs={8} md={8} lg={9}>
                    <Statement>{item.message}</Statement>
                    <Heading className='font-Bold'>{item.name},</Heading>
                    <Designation className='font-DemiBold'>{item.role}</Designation>
                </Col>
            </Row>
        );
    }

    handleClick(type: string) {
        let {currentIndex} = this.state;
        switch (type) {
            case 'DECREMENT':
                this.setState({
                    currentIndex: currentIndex - 1
                });
                break;
            case 'INCREMENT':
                this.setState({
                    currentIndex: currentIndex + 1
                });
                break;
            default:

        }
    }
}

Соответствующий стиль

import styled from 'styled-components';

import Col from '../../../common-util/col';
import Grid from '../../../common-util/grid';
import H4 from '../../../common-util/headers/h4';
import H5 from '../../../common-util/headers/h5';

export const Container = styled(Grid)`
    padding-bottom: 20px;
`;

export const Content = styled.div`
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
`;

export const Title = styled.h1`
    font-size: 42px;
    line-height: 1.0;
    letter-spacing: -0.3px;
    text-align: justify;
    font-weight: 500;
`;

export const Image = styled.img`
    width: 100%;
`;

export const Statement = styled.p`
    padding: 15px 20px;
    background: url(/static/images/svg/top-left-bg.svg) top left no-repeat, url(/static/images/svg/bottom-right-bg.svg) bottom right no-repeat;
    background-size: 20px;
    line-height: 2.3;
    letter-spacing: -0.2px;
    font-size: 16px;
    margin: 0
`;

export const Heading = H4.extend`
    color: #4990e2;
    text-align: left;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-left: 20px;
`;

export const Designation = H5.extend`
    text-align: left;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.2px;
    margin-top: 0;
    margin-left: 20px;
`;

export const Arrow = styled.div`
    margin: auto;
    color: grey;
    font-size: 20px;
    font-weight:lighter;
    cursor: pointer;
    &:hover {
        font-size: 22px;
    }

    &.disabled {
        pointer-events: none;
        &:hover {
            font-size: 20px;
        }
    }
`;

export const StyledCol = Col.extend`
    margin: auto;
`;

Answer 1

Это проблема.

this.state = {
   currentIndex: parseInt((Math.random()*10))%5,
};

Это будет вызываться на сервере и в браузере, вызывая несоответствие в отображаемой разметке.

Вы можете исправить это, убедившись, что random будет вызываться только в браузере:

this.state = {
  currentIndex: 0,
};

componentDidMount(){
  this.setState({ currentIndex: parseInt((Math.random()*10))%5 })
}

Answer 2

Использование хука useState и useEffect в React 16.8.0:

const [selectedImage, setImage] = useState(<defaultImage>);
useEffect(() => { 
    setImage(randomImage());
}, [selectedImage]);