2

我一直在使用 nextjs、react 和 redux，但我被卡住了。

我想 ssr 我的条件组件。我的代码有 3 个内容组件，如果用户根据上述条件单击导航栏组件中的链接，它们将呈现。该代码的工作方式与我想要的完全一样，但是当我在 Chrome 中查看源代码时，没有任何<Content />组件被渲染。这是我的代码：

import React, { Component } from 'react';
import dynamic from 'next/dynamic';
import NProgress from 'nprogress';
import { connect } from 'react-redux';
import Router from 'next/router';
import {
  actionFinansial,
  actionKarierSukses,
  actionGayaHidup
} from '/actions/navbar/navbar';
import SearchBar from '/components/Navbar/SearchBar';

import Nav from '/components/Navbar/Nav';

const Content = dynamic(import('/components/Navbar/Content'));

Router.onRouteChangeStart = url => {
  console.log(`Loading: ${url}`);
  NProgress.start();
};
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();

class Navbar extends Component {
  state = {
    isClick: false,
    active: ''
  };

  componentDidMount() {
    document.addEventListener('click', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.addEventListener('click', this.handleClickOutside);
  }

  handleClickOutside = e => {
    if (this.nav && !this.nav.contains(e.target)) {
      this.resetNavbar();
    }
  };

  resetNavbar = () => {
    this.setState({
      isClick: false,
      active: ''
    });
  };

  handleClick = (e, data) => {
    e.preventDefault();
    const cond = data === e.target.className || data === e.target.id;

    if (cond) {
      this.setState({
        isClick: true,
        active: data
      });
    }
    if (data === this.state.active) {
      this.setState({
        isClick: false,
        active: ''
      });
    }
  };

  handleContent = id => {
    if (this.state.active === 'Gaya Hidup') {
      this.props.fetchGayaHidup(id);
    } else if (this.state.active === 'Finansial') {
      this.props.fetchFinansial(id);
    } else {
      this.props.fetchKarierSukses(id);
    }
  };

  renderArrow = (type, data) => {
    return <span id={type} className={data} onClick={this.handleClick} />;
  };

  render() {
    const karierSukses = {
      16: 'Karier',
      15: 'Sukses',
      10: 'Edukasi'
    };

    const gayahidup = {
      16: 'Hiburan',
      17: 'Jalan-Jalan',
      18: 'Tekno',
      19: 'Hobi',
      8: 'Hubungan',
      9: 'Pernikahan',
      14: 'Keluarga',
      12: 'Kesehatan',
      15: 'Rumah',
      11: 'Otomotif'
    };

    const finansial = { 16: 'Bisnis', 11: 'Keuangan', 12: 'Investasi' };

    const {
      imgBig,
      contentFinansial,
      contentKarierSukses,
      contentGayaHidup
    } = this.props;
    const { active, isClick } = this.state;

    return (
      <section className="navbar" ref={node => (this.nav = node)}>
        {/* Category Nav */}
        <Nav
          resetNavbar={this.resetNavbar}
          active={active}
          handleClick={this.handleClick}
          arrow={this.renderArrow}
        />

        {/* Category Content */}
        {this.state.active === 'Gaya Hidup' ? (
          <Content
            imgBig={imgBig}
            categoriesIds={gayahidup}
            handleContent={this.handleContent}
            active="8"
            activeName="Hubungan"
            content={contentGayaHidup}
          />
        ) : (
          ''
        )}
        {this.state.active === 'Finansial' ? (
          <Content
            imgBig={imgBig}
            icClick={isClick}
            categoriesIds={finansial}
            handleContent={this.handleContent}
            active="11"
            activeName="Keuangan"
            content={contentFinansial}
          />
        ) : (
          ''
        )}

        {this.state.active === 'Karier & Sukses' ? (
          <Content
            imgBig={imgBig}
            icClick={isClick}
            categoriesIds={karierSukses}
            handleContent={this.handleContent}
            active="10"
            activeName="Edukasi"
            content={contentKarierSukses}
          />
        ) : (
          ''
        )}

        {this.state.active === 'search-bar' ? <SearchBar /> : ''}

        <div className="navbar__search-icon">{/* <img src="" alt="" /> */}</div>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    contentFinansial: state.navbar.category.finansial,
    contentKarierSukses: state.navbar.category.karierSukses,
    contentGayaHidup: state.navbar.category.gayaHidup
  };
}

export default connect(mapStateToProps, {
  fetchGayaHidup: actionGayaHidup,
  fetchFinansial: actionFinansial,
  fetchKarierSukses: actionKarierSukses
})(Navbar);
4

1 回答 1

0

显然 contentGayaHidup （例如），作为道具传递，点击导航栏后，我正确吗？在这段代码之外发生了很多事情......

您可以尝试以下方法之一，看看是否是问题所在？如果确实是问题（contentXXXXXX props 更新但没有传递给渲染器），你可能必须找到另一种方法将它们传递下来；通过状态（虽然可能相当广泛），通过 redux 可能......

Hati2 特曼

1-将道具传递给状态

constructor(props){
  super(props);
  this.state={contentGayaHidup: this.props.contentGayaHidup}
}
// some more code
render() {
  return(
    {this.state.active === 'Gaya Hidup' ? (
          <Content
            imgBig={imgBig}
            categoriesIds={gayahidup}
            handleContent={this.handleContent}
            active="8"
            activeName="Hubungan"
            content={this.state.contentGayaHidup}
          />
        ) : (
          ''
        )}
  )
}

2-使用componentdidUpdate

componentDidUpdate(prevProps, prevState) {
        const {contentGayaHidup} = this.props;
        if(contentGayaHidup !== prevProps.contentGayaHidup){
            this.setState({contentGayaHidup: this.props.contentGayaHidup})
        }

    }

// some more code
render() {
  return(
    {this.state.active === 'Gaya Hidup' ? (
          <Content
            imgBig={imgBig}
            categoriesIds={gayahidup}
            handleContent={this.handleContent}
            active="8"
            activeName="Hubungan"
            content={this.state.contentGayaHidup}
          />
        ) : (
          ''
        )}
  )
}
于 2018-03-18T11:04:58.737 回答