Проблемы с router.query, совпадающим с идентификатором массива при рендере - PullRequest
Новая
       32

Проблемы с router.query, совпадающим с идентификатором массива при рендере

0 голосов
/ 23 октября 2018

Я пытаюсь получить максимальную отдачу от SEO моих модалов, активируя их на основе того, что маршрутизатор отправляет идентификатор на URL-адрес и затем извлекает его снова.

Проблема в том, что я не могу показатьсячтобы обойти условие if, совпадающее с router.query.causeId === cause.id, так что это только рендеринг необходимого мне модала, а не все.

Любая помощь будет принята с благодарностью! 

class CSR extends React.Component {
    static async getInitialProps({ causes }) {
        return {
        causes: [
            {
            id: 1,
            name: 'clean-water',
            title: 'Provide clean water',
            type: 'Health',
            },
            {
            id: 2,
            name: 'educate-future',
            title: 'Educate the future',
            type: 'Education'
            },
            {
            id: 3,
            name: 'protect-rainforest',
            title: 'Protect the rain forest',
            type: 'Environment'
            },
        ],
        };
    }

    constructor(props) {
        super(props);
        this.onKeyDown = this.onKeyDown.bind(this);
    }

    // handling escape close
    componentDidMount() {
        document.addEventListener('keydown', this.onKeyDown);
    }

    componentWillUnmount() {
        document.removeEventListener('keydown', this.onKeyDown);
    }

    onKeyDown(e) {
        if (!this.props.router.query.causes) return;
        if (e.keyCode === 27) {
        this.props.router.back();
        }
    }

    dismissModal() {
        Router.push('/');
        document.body.style.overflow = this.state.originalBodyOverflow;
    }

    showCause(e, id) {
        e.preventDefault();

        this.setState({
        originalBodyOverflow: document.body.style.overflow,
        });
        document.body.style.overflow = 'hidden';

        Router.push(`/?causeId=${id}`, `/cause?id=${id}`);
    }

    render() {
        const { router, causes } = this.props;

        return (
        <div className="appContainer">
            <div className="CSR">
                <div className="CSR__causes-container">
                {router.query.causeId && (
                    <>
                    {causes.map((cause) => (
                        <Modal
                        key={cause.id}
                        id={router.query.causeId}
                        cause={cause}
                        onDismiss={() => this.dismissModal()}
                        />
                    ))}
                    </>
                )}
                {causes.map((cause) => (
                    <div key={cause.id} className="CSR__causes-cause">
                    <img
                        src={cause.imageUrl}
                        className="CSR__causes-cause-image"
                    />
                    <div className="CSR__causes-cause-overlay">
                        <div>
                        <h4>{cause.type}</h4>
                        <h2>{cause.title}</h2>
                        <p>{cause.desc}</p>
                        <Link href={`/cause?id=${cause.id}`}>
                            <a
                            onClick={(e) => this.showCause(e, cause.id)}
                            className="CSR__causes-cause-button btn btn-secondary"
                            >
                            Select cause
                            </a>
                        </Link>
                        </div>
                    </div>
                    </div>
                ))}
                </div>
            </div>
            </div>
        </div>
        );
    }
}
...