react-redux - 尝试在 react-redux 中更新时出错

Question

我正在尝试在 redux 中更新我的数据，但是当我在状态中有多个值时出现错误。

我如何将数据传输到下面的 AllPalletes 组件中：

<Route exact path='/' render ={(routeProps) => <AllPalletes data = {this.props.palleteNames} />} />

AllPalletes 组件，我在其中设置编辑表单：

class connectingPalletes extends Component {  

    render () {
        console.log(this.props)
        return (
            <div>
            <Menu inverted>
            <Menu.Item header>Home</Menu.Item>
            <Menu.Item as = {Link} to = '/createpalette'>Create a Palette</Menu.Item>
            </Menu>
            <Container>
            <Card.Group itemsPerRow={4}>
            {this.props.data.map((card) => {
                let cardName = card.Name.replace(/\s+/g, '-').toLowerCase()
                return (
                    <Card key = {card._id}>
                        <Image src = 'https://images.pexels.com/photos/1212406/pexels-photo-1212406.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' wrapped ui={false}/>
                        <Card.Content>
                        <Grid>
                        <Grid.Column floated = 'left' width ={7}>
                        {card.edit? (
                            <PaletteEditForm {...card}/>
                        ) : (
                            <Card.Header as = {Link} to = {`/palette/${cardName}`}>{card.Name}</Card.Header>
                        )}

                        </Grid.Column>
                        <Grid.Column floated = 'right' width = {5}>
                        <Icon name = 'pencil' />
                        <Icon name = 'trash' onClick = {() => this.props.dispatch(removePalette({id: card._id}))}/>
                        </Grid.Column>
                        </Grid>
                        </Card.Content>
                        </Card>
                )
            })}
            </Card.Group>
            <Divider></Divider>
            <Divider hidden></Divider>
            <Grid centered columns={1}>
            <Button as = {Link} to = '/testing'>Go Back</Button>
            </Grid>
            </Container>
            </div>
        )
    }
}
const AllPalletes = connect()(connectingPalletes)

export default AllPalletes

这是编辑表格：

class EditForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            paletteName: this.props.Name
        }
    }

    handleChange = (e) => {
        const val = e.target.value,
              s_name = e.target.name
        this.setState (() => {
            return {
                [s_name]: val, 
            }
        })
    }

    handleSubmit = () => {
        let updates = {Name: this.state.paletteName, edit: false}
        this.props.dispatch(editPalette(this.props._id, updates))

    }

    render() {
        console.log(this.props)
        return (
            <Form onSubmit = {this.handleSubmit}>
            <Input type = 'text' name = 'paletteName' value = {this.state.paletteName} onChange={this.handleChange} />
            </Form>

        )
    }
}

const PaletteEditForm = connect()(EditForm)

export default PaletteEditForm

我的减速机：

import uuid from 'uuid/v1'
const paletteDefault = [{
    Name: "Material UI",
    myArray: [],
    _id: uuid(),
    edit: false
}, {
    Name: "Splash UI",
    myArray: [],
    _id: uuid(),
    edit: true
}]

const PaletteReducers = (state = paletteDefault, action) => {
    console.log(action)
    switch(action.type) {
        case 'ADD_PALETTE':
            return [...state, action.palette]
            case 'REMOVE_PALETTE':
                return state.filter(x => x._id !== action.id)
                case 'EDIT_PALETTE':
                    return state.map((palette) => {
                        if(palette._id === action.id) {
                            return {
                                ...palette,
                                ...action.updates
                            }
                        }
                    })
        default:
            return state
    }
}

export default PaletteReducers

My Action

// EDIT_PALETTE

const editPalette = (id, updates) => ({
    type: 'EDIT_PALETTE',
    id,
    updates
})

export {addPalette, removePalette, editPalette}

我有一种感觉，问题可能出在我如何设置减速机外壳上。

只有当我在状态中有一个值时，编辑调度才有效。否则，我会收到此错误：

Uncaught TypeError: Cannot read property 'Name' of undefined
at AllPalletes.js:23

请帮忙..

标签： react-reduxcrud

Answer 1

我发现了错误。在 if 语句之后，我没有在“EDIT_PALETTE”的情况下给出返回值。它是

case 'EDIT_PALETTE':        
return state.map((palette) => {
 if(palette._id === action.id) {
 return {
...palette,
...action.updates
    }
  }

})

而应该是：

 case 'EDIT_PALETTE':
return state.map((palette) => {
 if(palette._id === action.id) {
 return {
  ...palette,
  ...action.updates
      }  
     }
  return palette
})