Props 无法使用 redux 正确更新

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) ]
    }
}

Props 无法使用 redux 正确更新

Props doesn't update correctly with redux

reactjs

redux

react-redux

react-props