figure is rendered according to the array hostedLand , with an initial length of 1.
hostedLandlength2
statehostedLandlength
and the console does not output anything.
reducer:
import { addHostedLand } from "../actions"
const mapStateToProps = state = {
//
}
const mapDispatchToProps = dispatch => {
return {
addHostedLand: () => dispatch(addHostedLand()),
deleteLand: (...args) => dispatch(deleteLand(...args)),
}
}
class HomeComponent extends Component {
render(){
const { hostedLand, addHostedLand } = this.props
console.log(hostedLand)
return (
<div>
{hostedLand.map(land =>
<OtherComponent {...this.props} key={land.id} id={land.id} />
)}
<button onClick={addHostedLand}></button>
<div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeComponent)OtherCompoent:
...
render () {
const {id, deleteLand } = this.props
return () {
.....
<button onClick={() => deleteLand(id)}><button>
.....
}
}
...