当前位置: 首页 > 知识库问答 >
问题:

当数据被推送到空数组时,redux reducer不会改变状态

龚钧
2023-03-14

我试图将减速器中的数据追加到映射数组中。只有当它们是图像数组中的数据时,此还原器才能工作。但是在调用img时,会在多个实例上给出类型错误。

举个例子

TypeError:无法读取未定义的属性“image\u title”

刷新时,我可以看到新数据,可以添加数据,可以看到更新的状态。只有当图像数组为空时,才会出现类型错误问题。

  const myImages = newState.images 
  console.log(myImages); // renders empty array []

我希望能够将数据追加到空数组,并显示数据,而无需重新渲染/刷新或任何类型错误错误。

数据结构给定它们是数组中的存量数据。

0:{
  "id": 71,
  "image_title": "ii",
  "img_url": "https://*********",
  "created_at": "2019-06-24T02:36:48.359Z",
  "updated_at": "2019-06-24T02:36:48.359Z",
  "user_id": 1,
  "user": {
    "id": 1,
    "googleId": null,
    "username": "a******",
    "password": "**********",
    "email": "a********",
    "created_at": "2019-06-23T18:57:17.253Z",
    "updated_at": "2019-06-23T18:57:17.253Z"
  },
  "comments": []
}

减速器

import { GET_IMAGES, POST_COMMENT, DELETE_IMAGE, UPLOAD_IMAGE } from '../actions/types';

const initialState = {
    images:[],

}

export default  (state = initialState, action) => {
    switch (action.type) {
        case GET_IMAGES:
            console.log(action.data);
            return{
                ...state,
                images:action.data
            }
        case UPLOAD_IMAGE:
            const newState = {...state}
            const myImages = newState.images 
            // console.log(myImages); // empty array
            const newImage = action.newImage
            console.log(newImage[0]); // gets the new uploaded image. 

            return {
                images:[

                    {
                        id: newImage[0].id,
                        user:{
                            username:newImage[0].user.username
                        },
                        comments:{
                          comment_body: newImage[0].comments.comment_body  
                        },
                        image_title: newImage[0].image_title,
                        img_url: newImage[0].img_url,
                    },

                    // myImages[0] // pass the previous images

                ]   

            }

        default:
            return state;
    }
}

行动

// upload image 
export const uploadImage = data =>  {
   return (dispatch) => {
    Axios.post('/images/upload', data).then((response) => {
        const newImage = {...response.data}
        console.log(newImage);

        dispatch({type:UPLOAD_IMAGE, newImage})
        // history.push("/dashboard");
    });

   } 

}    
// get images
export const getImages = () => {
    return async (dispatch) => {
       const url =  await Axios.get('/images/uploads')
       const data = url.data;
        dispatch({ 
            type: GET_IMAGES,
            data
        })

    }
}

Dashboard.js

import React, { Component } from "react";
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ImageUploader from 'react-images-upload';
import ImageContainer from "./ImageContainer"
import {connect} from 'react-redux';
import {getImages, deleteImage, uploadImage} from '../actions/imageActions';
import dashboardStyles from '../styles/dashboardStyles';
import {withStyles} from '@material-ui/core/styles';
import {compose} from 'redux';
class Dashboard extends Component{
    constructor(props){
        super(props);
        this.state = {
            image_url: '', 
            description:'',
            upload:false,
            isComment:false,
            comment_body:''
        }
    }
    handleUpload =  file =>  {
        const data = new FormData()
        const image = file[0]
        // console.log(this.state.description)
        // data.append('ourImage', this.state.description)
        data.append('ourImage',image, this.state.description )
        this.props.uploadImage(data);

        this.setState({
            description: ''
        })



    }
    handleChange = (e) => {
        // e.preventDefault();
        this.setState({
            [e.target.name]: e.target.value
        })
        // console.log(this.state.description)
    }
    componentDidMount(){
        this.props.getImages();
        console.log(this.props.image.images);
    }


      .........
      {image.images.length > 0 ? (
       image.images.map( (img, i) => (   
           <div key={i}>
               <ImageContainer img={img} deleteImg={() => this.deleteImg(img.id)}/>
           </div>      
       ))
      ) : (
          <div>
              <Grid item md={8}>
                  <Typography>No Images yet</Typography>
               </Grid>
          </div>
      )}


const mapStateToProps = (state) => ({
   image: state.image
})
const mapDispatchToProps = (dispatch) => ({
   getImages: () => dispatch(getImages()),
   uploadImage: (data) => dispatch(uploadImage(data))
})
export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(dashboardStyles))(Dashboard)

图像容器

  render(){
       const { img, deleteImg, classes } = this.props
       return(
           <Grid item sm={12} md={12} className={classes.imageGridItem}>
               <Paper className={classes.imageContainerPaper}>
         {/* // empty image_title */}
               <Typography className={classes.imageTypographyTitle} variant="h4" align="center">{img.image_title}</Typography> 
               <Divider className={classes.imageDivider} variant="middle" />
               <Image image_url={img.img_url} />   
               <Typography variant="h6" align="center">{img.user.username}</Typography> 
               <Typography variant="h6" align="center">{moment(img.created_at).calendar()}</Typography> 
               ........                       
        </Grid>        
      )
   }
}

共有1个答案

曹光霁
2023-03-14

您正在发送对象,但正在作为数组访问。

const newImage = {...response.data}


const newImage = action.newImage

如何修复

const newImage = [...response.data]; // send as array
 类似资料:
  • 我有一个基于url的react组件,它应该导入一些数据,然后在另一个子组件中显示。当页面首次加载时,它将初始数据作为组件状态加载到中。至于进一步的url更改,它们将在export default class Info()中处理。组成部分{ 我的问题是,尽管switch语句中有状态更新,但组件不会重新渲染。我不知道我的方法有什么问题。有人能帮我吗?谢谢 编辑:这是使用而不是的代码:

  • 介绍 我注意到我们项目中的推送过滤器都不起作用。它解释了为什么执行时间受到影响,因为它读取了数百万次,而它应该将它减少到几千次。为了调试这个问题,我编写了一个小测试,读取CSV文件,过滤内容(下推过滤器)并返回结果。 它不能与CSV一起工作,所以我尝试读取一个拼花文件。没有一个能用的。 数据 文件具有以下结构: 名词(noun的缩写)镶木地板文件有相同的结构 读取CSV文件 为了重现这个问题,我编

  • 我是新来的反应本地人。我需要,如何推setState数组到新的数据?

  • 我是reactjs的新手,我不知道如何从父组件中更改子组件的状态。下面是代码 每当对父组件中的执行时,我希望子组件接收。 有什么建议吗?

  • 问题内容: 我有一个示例数组,用于将条目插入到YUI数据表中 我可以通过这样做获得相同的阵列吗? 我在这里尝试的是编写一个通用方法,该方法将遍历结果列表并在将来能够形成一个条目。 所以我怎样才能使数组与本书代码的第一部分相同? 添加了我的整个示例代码,带注释的书本数组似乎可以工作,但未注释的部分似乎无法显示行 问题答案: 我尝试并找到了解决方案,因为在我按入后,att和值将成为对象 这将使其显示在

  • 我可以提交大量更改,但没有任何内容可以进入 github。 只有当我从菜单中手动单击 PUSH 函数时,它才会推送到 github。 如何让它在提交时自动执行此操作? 这些是我的VS GIT设置: