Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

export function deleteShareholder(shareholder) {
    return {
        type: 'DELETE_SHAREHOLDER',
		    payload: shareholder
	  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

case 'DELETE_SHAREHOLDER':
    state = state.shareholdersList.filter(sh => sh.id !== action.payload)
		break

我使用带有react和redux的对象数组，当我从数组中删除对象时，该数组在当前组件中变为未定义，但在父组件中，它会正确更新。却是相同的道具。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


import React, { Component } from 'react'
import { connect } from 'react-redux'

import ShareholdersList from './shareholdersList'

class SasShareholdersForm extends Component {

	render() {		
		console.log(this.props.shareholders.shareholdersList)
		return(
            <ShareholdersList shareholders={ this.props.shareholders } deleteShareholder={ this.props.deleteShareholder} />
        )
    }
}

const mapStateToProps = (state) => {
	return {
		shareholders: state.shareholders,
	}
}

const mapDispatchToProps = (dispatch) => {
	return {
		deleteShareholder: (shareholderId) => {
			dispatch(deleteShareholder(shareholderId))
		}
	}
}

export default connect(mapStateToProps, mapDispatchToProps) (SasShareholdersForm)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import React from 'react'

const ShareholdersList = (props) => {
console.log(props.shareholders.shareholdersList)
	
return (
    <div className="column justify-content-around my-5">
        {props.shareholders && props.shareholders.shareholdersList.map((sh, i) =>
            <div className="py-2" key={i}>
                <div className="form-group row justify-content-between align-items-center mr-2">
                    <button className='btn btn-outline-info mr-2'>Edit</button>
                    <button className='btn btn-outline-danger' onClick={ () => props.deleteShareholder(sh.id) } >{sh.id} X</button>
                </div>
                
                <div className="form-group">
                    <label htmlFor="shCAddress">Adresse:</label>
                    <h6 id="shCAddress" >{sh.shCAddress}</h6>						
                </div>

                <div className="form-row">
                    <div className="form-group col-md-4">
                        <label htmlFor="shCZipcode">Code postal:</label>
                        <h6 id="shCZipcode" >{sh.shCZipcode}</h6>													
                    </div>
                    <div className="form-group col-md-6">
                        <label htmlFor="shCCompanyName">Ville:</label>
                        <h6 id="shCCity" >{sh.shCCity}</h6>													
                    </div>
                </div>
            </div>
        }
    </div>
)
}

Answer 1

由于我们看不到您的完整代码，因此只有我们可以猜测并提出一些建议。请，如果有人要求提供一些代码，请尽可能提供相关部分。因此，它实际上并不完整。例如，我们在这里看不到您的状态。

您的DELETE_SHAREHOLDER案错了。不要像这样设置您的状态，不要更改您的状态。可能您想做这样的事情：

case 'DELETE_SHAREHOLDER': {
    return {
        ...state,
        shareholdersList: [ ...state.shareholdersList.filter(sh => sh.id !== action.payload) ]
    }
}

道具无法使用Redux正确更新

1 个答案: