profile
viewpoint
zhang wei zhangwei900808 Ein Nanjing,China http://www.awbeci.com A new day, a new beginning

zhangwei900808/awbeci-ssb 95

spring spring-boot spring-security spring-social

zhangwei900808/AcPlayer 5

acplayer 带DVD转动效果的音频播放器

hiynn-com/hiynn-design 4

海云前端标准化组件库

zhangwei900808/ant-design-layoutui 1

基于ant-design的后台管理模板UI

zhangwei900808/antd-layoutui 1

based on antd layout ui framework

zhangwei900808/automatic-combine-redux 1

automatic combine redux

zhangwei900808/awesome-php-zh_CN 1

一个PHP资源列表,内容包括:库、框架、模板、安全、代码分析、日志、第三方库、配置工具、Web 工具、书籍、电子书、经典博文等等

hiynn-com/hiynn-design-landing 0

Hiynn Design 首页页面

hiynn-com/web-scaffold 0

海云前端脚手架

issue closedkevinsqi/react-calendar-heatmap

used next.js error

react-dom.development.js?61bb:88 Warning: Prop `className` did not match. Server: "color-gitlab-3" Client: "color-gitlab-2"

this is my code

<CalendarHeatmap
                weekdayLabels={weekcn}
                monthLabels={monthcn}
                startDate={shiftDate(today, -360)}
                endDate={today}
                values={randomValues}
                classForValue={value => {
                    if (!value) {
                        return 'color-empty';
                    }
                    return `color-gitlab-${value.count}`;
                }}
                // tooltipDataAttrs={(value) => {
                //     return `${value.date.toISOString().slice(0, 10)} has count: ${value.count}`
                // }}
                showWeekdayLabels={true}
                onClick={value => alert(`Clicked on value with count: ${value.count}`)}
            />

closed time in 6 days

zhangwei900808

issue commentkevinsqi/react-calendar-heatmap

used next.js error

my sub component data passed in parent component getServerSideProps its workd!

parent

export async function getServerSideProps() {
  return {
    props: {
      randomValues: JSON.stringify(randomValues)

sub

<CalendarHeatmap
                weekdayLabels={weekcn}
                monthLabels={monthcn}
                startDate={shiftDate(today, -360)}
                endDate={today}
                values={JSON.parse(props.randomValues)}
                classForValue={value => {
                    if (!value) {
                        return 'color-empty';
                    }
                    return `color-gitlab-${value.count}`;
                }}
                showWeekdayLabels={true}
                onClick={value => alert(`Clicked on value with count: ${value.count}`)}
            />
zhangwei900808

comment created time in 6 days

issue commentvercel/next.js

Warning: Prop className did not match.

my sub component data passed in parent component getServerSideProps its workd!

parent

export async function getServerSideProps() {
  return {
    props: {
      randomValues: JSON.stringify(randomValues)

sub

<CalendarHeatmap
                weekdayLabels={weekcn}
                monthLabels={monthcn}
                startDate={shiftDate(today, -360)}
                endDate={today}
                values={JSON.parse(props.randomValues)}
                classForValue={value => {
                    if (!value) {
                        return 'color-empty';
                    }
                    return `color-gitlab-${value.count}`;
                }}
                showWeekdayLabels={true}
                onClick={value => alert(`Clicked on value with count: ${value.count}`)}
            />
th0th

comment created time in 6 days

issue openedkevinsqi/react-calendar-heatmap

used next.js error

react-dom.development.js?61bb:88 Warning: Prop className did not match. Server: "color-gitlab-3" Client: "color-gitlab-2"

this is my code

<CalendarHeatmap
                weekdayLabels={weekcn}
                monthLabels={monthcn}
                startDate={shiftDate(today, -360)}
                endDate={today}
                values={randomValues}
                classForValue={value => {
                    if (!value) {
                        return 'color-empty';
                    }
                    return `color-gitlab-${value.count}`;
                }}
                // tooltipDataAttrs={(value) => {
                //     return `${value.date.toISOString().slice(0, 10)} has count: ${value.count}`
                // }}
                showWeekdayLabels={true}
                onClick={value => alert(`Clicked on value with count: ${value.count}`)}
            />

created time in 6 days

startedwwayne/react-tooltip

started time in 7 days

startedjulienr114/vue-calendar-heatmap

started time in 7 days

startedkevinsqi/react-calendar-heatmap

started time in 7 days

startedDKirwan/calendar-heatmap

started time in 7 days

startedwa0x6e/cal-heatmap

started time in 7 days

startedhaoxh/Calendar

started time in 11 days

issue commentvercel/next.js

with-redux-wrapper example bug

@Pitasi I try it, It work! very thank you

zhangwei900808

comment created time in a month

issue openedvercel/next.js

with-redux-wrapper example bug

Bug report

Describe the bug

In with-redux-wrapper example index.js page has a code:

export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
  store.dispatch(serverRenderClock(true))
  store.dispatch(addCount())
})

the reducer.js

import { countActionTypes } from './action'

const countInitialState = {
  count: 0,
}

export default function reducer(state = countInitialState, action) {
  switch (action.type) {
    case countActionTypes.ADD:
      return Object.assign({}, state, {
        count: state.count + 1,
      })
    default:
      return state
  }
}

in getStaticProps code has store.dispatch(addCount()) so when I run the index.js page the page count must be 1 but is 0 is bug? image

created time in a month

issue closedredux-model/redux-model

支持redux-saga吗

支持redux-saga吗

closed time in a month

zhangwei900808

push eventzhangwei900808/nextjs-slugpath

justinzhang

commit sha b784d5ab23e15a17bfa4764b4bb3506f039e92c3

feature:添加redux功能

view details

push time in a month

fork zhangwei900808/dva-no-router

(Deprecated) Official React bindings for dva, no router.

fork in a month

startedstoeffel/redux-elm-middleware

started time in a month

push eventzhangwei900808/nextjs-slugpath

justinzhang

commit sha b83dfea9cc03f44abb39613ea6f209e8caa1e6db

feature:添加redux支持

view details

push time in a month

issue commentredux-model/redux-model

支持redux-saga吗

@zhangwei900808 虽然如此,但是我还是喜欢用saga,它的优点太多,虽然写法上有点别扭!Redux Saga vs Async/Await这是别人写的文章 你可以看看

zhangwei900808

comment created time in a month

startedsl1673495/next-github

started time in a month

push eventzhangwei900808/nextjs-slugpath

justinzhang

commit sha 5568edcf0ffa7fe0c69f468a0c6d2cd54ca045c7

feature:添加进度条

view details

push time in a month

push eventzhangwei900808/nextjs-slugpath

justinzhang

commit sha 17dae48a369e4ec48429b6b86062228fce82d042

feature:添加about页面

view details

push time in a month

push eventzhangwei900808/nextjs-slugpath

justinzhang

commit sha d3345b64d718ac228ed9f245338b0936a13d5c0b

feature:添加路由跳转

view details

push time in a month

push eventzhangwei900808/nextjs-slugpath

justinzhang

commit sha 724d44d1595b2523264a9300f47990a3a3cc577b

add:readme.md

view details

push time in a month

create barnchzhangwei900808/nextjs-slugpath

branch : master

created branch time in a month

created repositoryzhangwei900808/nextjs-slugpath

基于next.js的动态路由自动匹配上用户名

created time in a month

issue commentredux-model/redux-model

能不能支持下next.js

@fwh1990 方便异步接口的测试和可以随时取消相应的异步操作

zhangwei900808

comment created time in a month

issue openedredux-model/redux-model

支持redux-saga吗

支持redux-saga吗

created time in a month

fork zhangwei900808/dva

🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)

https://dvajs.com/

fork in a month

starteddvajs/dva-no-router

started time in a month

issue commentSugarTurboS/rc-redux-model

什么时候支持next.js啊

@PDKSophia 可以啊,vx:595806165

zhangwei900808

comment created time in a month

issue commentSugarTurboS/rc-redux-model

为什么使用redux-thunk不使用redux-saga做为中间件?

@ForeverPx @PDKSophia 我的想法是可以提供thunk和saga版本供开发者选择,我可以不用但是框架一定要有!而且既然你都说了只做demo和小项目,我觉得react就更不适合了,反而vue更简单,用react做项目应该都是考虑到项目会很大,而且你们也加入了immutable.js对数据做更好的处理,所以用thunk有点说不过去。

zhangwei900808

comment created time in a month

issue openedSugarTurboS/rc-redux-model

为什么使用redux-thunk不使用redux-saga做为中间件?

按照react redux最佳实践,应该redux-saga才是最佳选择啊,使用thunk是有什么其它考虑么?

created time in a month

issue commentSugarTurboS/rc-redux-model

如何使用 rc-redux-model 去实现数据管理

为什么上面使用的是saga,到了入口文件变成thunk中间件了?

PDKSophia

comment created time in a month

issue commentredux-model/redux-model

能不能支持下next.js

@fwh1990 忘了问了,框架支持redux-saga吗

zhangwei900808

comment created time in a month

issue openedconcentjs/concent

支持next.js吗

支持next.js吗

created time in a month

startedconcentjs/concent

started time in a month

fork zhangwei900808/rc-redux-model

✍️ 提供一种较为舒适的数据状态管理书写方式,让你简洁优雅的去开发;内部自动生成 action, 只需记住一个 action,可以修改任意的 state 值,方便简洁,释放你的 ⌨️ CV 键~

fork in a month

issue openedSugarTurboS/rc-redux-model

什么时候支持next.js啊

什么时候支持next.js啊

created time in a month

startedSugarTurboS/rc-redux-model

started time in a month

issue closedredux-model/redux-model

能不能支持下next.js

能不能支持下next.js

closed time in a month

zhangwei900808

issue commentredux-model/redux-model

能不能支持下next.js

@fwh1990 无意中搜索redux model发现了你的框架,非常喜欢,我现在用的是next.js+redux+redux-acitons+redux-saga,感觉好复杂,而你的框架感觉好方便,非常得心上手,希望尽快支持next.js,并加入到官方 的example里面,非常期待!

zhangwei900808

comment created time in a month

startedbyte-fe/react-model

started time in a month

issue openedredux-model/redux-model

能不能支持下next.js

能不能支持下next.js

created time in a month

startedredux-model/redux-model

started time in a month

startedwooline/medux-react-admin

started time in a month

startedwooline/medux

started time in a month

issue openeddvajs/dva

with-nextjs例子能不能更新下

现在官方next.js都出了9.x版本,而且getInitialPorps都被 getStaticProps和getServerSideProps取代了

created time in a month

startedlnlfps/symph-joy

started time in a month

startedangular-ui/ui-grid

started time in 2 months

issue commentant-design/ant-design

antd什么时候官方支持next.js?

现在的next.js官方支持性不是太好,希望antd考虑官方支持next.js

zhangwei900808

comment created time in 2 months

issue openedant-design/ant-design

antd什么时候官方支持next.js?

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

解决了next.js的支持性

What does the proposed API look like?

官方提供解决方案

<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->

created time in 2 months

issue commentant-design/ant-design

✨ Ant Design 4.0 is out!

什么时候官方支持下next.js,期待

zombieJ

comment created time in 2 months

startedsnipcart/snipcart-nextjs

started time in 2 months

startedLiuuY/Blog

started time in 2 months

startedvitejs/vite

started time in 2 months

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

你如果不信,可以在ssr-with-dva中加入下面这段代码测试,刷新页面看看go显不显示,代码总不会说谎吧

Page.getInitialProps = async ({ store }) => {
  await store.dispatch({ type: 'page/getData' })
  return { go: 'ddd' }
}
zhangwei900808

comment created time in 2 months

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

可是我加上就显示了,刷新也没问题

zhangwei900808

comment created time in 2 months

IssuesEvent

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

@zhangyuang 我找到问题原因了,在entry.js中组件的数据没有注入,我已经解决了,不过报了一个错

const serverRender = async ctx => {
  const app = initDva({
    history: createMemoryHistory({
      initialEntries: [ctx.req.url]
    })
  })
  const store = app._store
  ctx.store = store
  const ActiveComponent = getComponent(Routes, ctx.path)()
  const Layout = ActiveComponent.Layout || defaultLayout
- ActiveComponent.getInitialProps ? await ActiveComponent.getInitialProps(ctx) : {} // eslint-disable-line

+  const componentData = ActiveComponent.getInitialProps ? await ActiveComponent.getInitialProps(ctx) : {} // eslint-disable-line
  const storeState = store.getState()
-  ctx.serverData = storeState
+ const mergeData = Object.assign({}, componentData, storeState)
+ ctx.serverData = mergeData
  app.router(() => (
-    <StaticRouter location={ctx.req.url} context={storeState}>
+   <StaticRouter location={ctx.req.url} context={mergeData}>
      <Layout layoutData={ctx}>
-        <ActiveComponent {...storeState} />
+       <ActiveComponent {...mergeData} />
      </Layout>
    </StaticRouter>
  ))

  const DvaApp = app.start()
  return <DvaApp />
}
Page.getInitialProps = async ({ store }) => {
  await store.dispatch({ type: 'page/getData' })
  return { go: 'ddd' }
}

运行时报警告,下面的go上面的代码中的go

Unexpected key "go" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "routing", "@@dva", "page", "news". Unexpected keys will be ignored.
warning @ warning.js:10
combination @ combineReducers.js:110
dispatch @ createStore.js:165
createStore @ createStore.js:240
(anonymous) @ applyMiddleware.js:28
createStore @ createStore.js:51
_default @ createStore.js:49
start @ index.js:250
start @ index.js:72
initDva @ entry.js:15
clientRender @ entry.js:22
./web/entry.js @ entry.js:77
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.less?d0a8:8
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ Page.chunk.js:1

我已经提PR,你看看

zhangwei900808

comment created time in 2 months

PR opened ykfe/egg-react-ssr

fix:修改dva页面组件注入数据刷新失败问题

修改dva页面组件注入数据刷新失败问题

+6 -6

0 comment

1 changed file

pr created time in 2 months

push eventzhangwei900808/egg-react-ssr

zhangwei

commit sha 03103123951f1f490029b3348e208c9bf001645c

fix:修改dva页面组件注入数据刷新失败问题

view details

push time in 2 months

startedsskyy/icejs

started time in 2 months

startedeggjs/egg-view

started time in 2 months

startedalibaba/beidou

started time in 2 months

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

@zhangyuang 我对比了ssr-with-dva和ssr-with-antd,发现:ssr-with-antd刷新页面与否都能渲染,但是ssr-with-dva只有走history模式才可以,刷新页面就不展示了,剩下的就交给你们了

zhangwei900808

comment created time in 2 months

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

我刚又试了一个,走history到该页面是能获取到props.hello的,但是如果刷新页面就不行!!!这是为什么?

function News(props) {
  return <div className='news-container'>
    {props.hello}
  </div>
}

News.getInitialProps = async (ctx) => {
  const newsId = __isBrowser__ ? ctx.match.params.id : ctx.params.id
  await ctx.store.dispatch({ type: 'news/getData', payload: { id: newsId } })
  return { hello: 'ddd' }
}
zhangwei900808

comment created time in 2 months

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

@zhangyuang 我用你们的ssr-with-dva例子试了,也返回不了,你可以看看

zhangwei900808

comment created time in 2 months

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

你用我这个entry.js试试看看能不能传递到props里面

import React from 'react'
import ReactDOM from 'react-dom'
import dva from 'dva'
import { BrowserRouter, StaticRouter, Route, Switch } from 'react-router-dom'
import { getWrappedComponent, getComponent } from 'ykfe-utils'
import { createMemoryHistory, createBrowserHistory } from 'history'
import { routes as Routes } from '../config/config.ssr'
import defaultLayout from '@/layout'
import models from './models'

const initDva = (options) => {
  const app = dva(options)
  models.forEach(m => app.model(m))
  app.router(() => { })
  app.start()
  return app
}

const clientRender = () => {
  const initialState = window.__INITIAL_DATA__ || {}
  const history = createBrowserHistory()
  const app = initDva({
    initialState,
    history: history
  })
  const store = app._store

  app.router(() => (
    <BrowserRouter>
      <Switch>
        {
          Routes.map(({ path, exact, Component }) => {
            const ActiveComponent = Component()

            // layout 支持history
            const Layout = getWrappedComponent(ActiveComponent.Layout || defaultLayout)
            // const Layout = ActiveComponent.Layout || defaultLayout
            const WrappedComponent = getWrappedComponent(ActiveComponent)
            return <Route exact={exact} key={path} path={path} render={() => <Layout store={store}><WrappedComponent store={store} /></Layout>} />
          })
        }
      </Switch>
    </BrowserRouter>
  ))
  const DvaApp = app.start()

  ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](<DvaApp />, document.getElementById('app'))

  if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept()
  }
}

const serverRender = async ctx => {
  const app = initDva({
    // 每个页面都有history属性进行跳转
    history: createMemoryHistory({
      initialEntries: [ctx.req.url]
    })
  })
  const store = app._store
  ctx.store = store
  const ActiveComponent = getComponent(Routes, ctx.path)()

  const Layout = ActiveComponent.Layout || defaultLayout
  // 判断组件是否有getInitialProps方法,有刚执行并且把数据传入
  ActiveComponent.getInitialProps ? await ActiveComponent.getInitialProps(ctx) : {} // eslint-disable-line
  // 判断Layout组件是否有getInitialProps方法,有刚执行并且把数据传入
  Layout.getInitialProps ? await Layout.getInitialProps(ctx) : {} // eslint-disable-line
  const storeState = store.getState()
  ctx.serverData = storeState

  app.router(() => (
    <StaticRouter location={ctx.req.url} context={storeState}>
      <Layout layoutData={ctx}>
        <ActiveComponent {...storeState} />
      </Layout>
    </StaticRouter>
  ))

  const DvaApp = app.start()
  return <DvaApp />
}

// __isBrowser__是为了兼容切换路由数据获取的方式
export default __isBrowser__ ? clientRender() : serverRender

// serverentry做的事是组件->html字符串。
// clientEntry做的事是html字符串->动态dom(绑定事件)
zhangwei900808

comment created time in 2 months

startedlensh/React-SSR

started time in 2 months

issue commentykfe/egg-react-ssr

我把数据通过getInitialProps注入到props里面,但是同类其它方法通过this.props获取不到?

@zhangyuang 上次不是你教我在entry.js中加入下面这段代码支持吗!

  Layout.getInitialProps ? await Layout.getInitialProps(ctx) : {} // eslint-disable-line

还有,我在page里面也试了,也打印undefined

 // 把从后台接口获取的数据注入到Props中
  static getInitialProps = (async ctx => {
    return { hello: 'zhangwei' }
  });
 hello   undefined
zhangwei900808

comment created time in 2 months

startedseatgeek/react-infinite

started time in 2 months

issue commentykfe/egg-react-ssr

example/ssr-with-ts实例cookie问题

OK,全局设置了signed: false,获取的时候也要设置signed: false!

let isLogin = this.ctx.cookies.get('isLogin', {
                signed: false,
            });
zhangwei900808

comment created time in 3 months

issue commentykfe/egg-react-ssr

example/ssr-with-ts实例cookie问题

如果设置signed:true,重新运行是好的,

 config.cookies = {
    httpOnly: false,
    signed: true
  }

image

zhangwei900808

comment created time in 3 months

issue openedykfe/egg-react-ssr

example/ssr-with-ts实例cookie问题

在example/ssr-with-ts实例中,我设置cookie

  async index() {
    try {
      // Page为webpack打包的chunkName,项目默认的entry为Page
      this.ctx.type = 'text/html'
      this.ctx.status = 200
      this.ctx.cookies.set('isLogin', 'sdfdsf')
      this.ctx.apiService = this.service.index // 将service挂载到上下文对象
      const config = Object.assign(this.ctx.app.config, ssrConfig)
      setTimeout(() => {
     // 这里打印为undefined
        let isLogin = this.ctx.cookies.get('isLogin');
        console.log('islogin33', isLogin);
      }, 3000)
      const stream = await renderToStream(this.ctx, config)
      this.ctx.body = stream
    } catch (error) {
      this.ctx.logger.error(`Page Controller renderToStream Error`, error)
    }
  }

}

并且config.default.ts配置cookie

 config.cookies = {
    httpOnly: false,
    signed: false
  }

运行项目,打印结果显示undefined image

created time in 3 months

startedbaiyuze/egg-dva

started time in 3 months

more