如何在我的组件中使用 redux 传递这个初始状态值？

Question

我正在使用 multer to handle image uploads to my Next.js app. And I'm using Redux 进行状态管理...

也就是说，我在我的商店中创建了一个名为 userAvatar 的属性作为我个人资料页面的最终头像。

我注意到尽管使用了 mapStateToProps，但 userAvatar 没有显示在 Profile 组件的道具中，因此导致图像不持久。

NO userAvatar 支持！

这是我的个人资料组件：

import { Button, Card, Feed, Icon, Image, Segment, Grid, Divider, Container, Header } from 'semantic-ui-react'

import MyHeader from '../Header/Header.jsx'
import ImageUploader from '../ImageUploader/ImageUploader.jsx';
import React, { useState } from 'react';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { modalStateOn, modalStateOff } from '../../store/reducers/ui/index'
import { loadAvatar } from '../../store/reducers/users/index'


const ProfilePage = ({ history, isMobileFromSSR, userAvatar,...props }) => {

  function handleImageUpload() {
   setProfileImage(true);
  }

 return (
  <>
 {console.log("userAvatar ", userAvatar)}
 {console.log('Profile Page!! ', props)}
     <Grid container columns={1} relaxed stackable>
      <Grid.Column>
        <MyHeader as='h2' content='Foo' textAlign='left' />
      </Grid.Column>
    </Grid>

    <Grid container columns={2} divided relaxed stackable>
      <Grid.Column>
        <Segment>
         <Card fluid>
          <Image src='static/profile-avatars/charly_desktop.jpg' wrapped ui={false} />
          <ImageUploader userAvatar={userAvatar} history={history} />
          <Card.Content>
            <Card.Header>Charly</Card.Header>
            <Card.Meta>
            <span className='date'>Joined in 2015</span>
            </Card.Meta>
            <Card.Description>
            Charly
            </Card.Description>
            </Card.Content>
          <Card.Content extra>
          <a>
           <Icon name='user' />
           22 Friends
          </a>
        </Card.Content>
       </Card>
      </Segment>
      </Grid.Column>

    </Grid>
 </>
 )

 }

function mapStateToProps(state) {
 const { ui, users } = state
 const { isLoggedIn, userAvatar } = users
 const { modalActive } = ui

 return { isLoggedIn, userAvatar, modalActive }
}

const mapDispatchToProps = dispatch =>
 bindActionCreators({ modalStateOn, modalStateOff, loadAvatar }, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage)

我认为这是因为它没有在某处正确传递。

这些是链中较高的组件。从移动设备更改为桌面设备时，上传的内容将恢复为默认值，反之亦然。

const LinkNavWithLayout = ({ children, history, data, userAvatar, modalActive, modalStateOn, modalStateOff, isLoggedIn }) => (
 <React.Fragment>
  <DesktopContainer history={history} data={data} userAvatar={userAvatar} modalActive={modalActive} modalStateOn={modalStateOn} modalStateOff={modalStateOff} isLoggedIn={isLoggedIn}>
   {children}
  </DesktopContainer>
  <MobileContainer history={history} data={data} userAvatar={userAvatar} modalActive={modalActive} modalStateOn={modalStateOn} modalStateOff={modalStateOff} isLoggedIn={isLoggedIn}>
   {children}
  </MobileContainer>
 </React.Fragment>
)

这些是路线：

 <>
    <Switch>
     <Route
      path='/'
      isLoggedIn={isLoggedIn}
      exact
      render={(props) => <LinkNavWithLayout {...props} data={navBars}><Index /></LinkNavWithLayout>} />

     <PrivateRoute
      path='/profile'
      isLoggedIn={isLoggedIn}
      >
      <LinkNavWithLayout data={navBars}><Profile user/></LinkNavWithLayout>
     </PrivateRoute>

     <PrivateRoute
      path='/dashboard'
      isLoggedIn={isLoggedIn}
     >
      <LinkNavWithLayout data={navBars}><Dashboard /></LinkNavWithLayout>
     </PrivateRoute>

     <Route
      path='/login'
      render={(props) => <Login {...props}/>}
     />

     <Route
      path='/register'
      render={(props) => <Register {...props}/>}
     />

     <Route component={({ location }) => <p>Sorry but the page <h1>{location.pathname.substring(1)} </h1> Page, Could Not be found</p>} />
    </Switch>
    </>

那么我应该在哪里添加 userAvatar 属性来使头像在我的应用程序中呈现。感谢您的任何输入！！！

Answer 1

此处 const ProfilePage = ({ history, isMobileFromSSR, userAvatar,...props }) => { 您使用 rest 语法将 userAvatar 分配给它自己的变量，这意味着它不会包含在 props 对象中。

您的控制台日志似乎显示它具有 userAvatar 的正确值。

如果您希望它位于 props 对象中，只需将其从您的函数声明中删除，如下所示：({ history, isMobileFromSSR,...props }).

这里是 link 到 docs on rest 参数。这是最相关的部分：

rest parameters are only the ones that haven't been given a separate name (i.e. formally defined in function expression)

如何在我的组件中使用 redux 传递这个初始状态值？

How do I pass this initial state value using redux in my component?

state

reactjs

multer

redux

react-router-v4