Реагируйте, как заставить дочерние компоненты иметь свое собственное состояние

Question

class States extends Component {

    componentDidMount() {
        this.props.getForSaleStates()

    }

    render() {

        return (
            <div>
                {this.props.post.states.map((eachState, index) => (
                    <State key={index} eachState={eachState} />
                ))}
            </div>
        )
    }
}

const mapStateToProps = state => ({
    post: state.post,
    auth: state.form
})


export default connect(mapStateToProps, {
    getForSaleStates
})(States)


class State extends Component {
    state = {
        isOpen: false,
        cities: []
    }

    componentDidUpdate(prevProps) {
        if (this.props.post.cities !== prevProps.post.cities) {
            this.setState({
                cities: this.props.post.cities
            })
        }
    }

    handleClick = (e) => {
        if (!this.state.isOpen) {
            this.props.getForSaleTowns(this.props.eachState)
        }

        this.setState({
            isOpen: !this.state.isOpen
        })
    }

    render() {
        console.log(this.state)
        return (
            <div>
                <ListGroupItem
                    style={{ fontSize: '12px' }} className='p-0 border-0'
                    tag="a" href="#"
                    onClick={this.handleClick}>
                    {!this.state.isOpen ? (
                        <i className="far fa-plus-square mr-1" style={{ fontSize: '1em' }}>
                        </i>
                    ) : (
                            <i className="far fa-minus-square mr-1" style={{ fontSize: '1em' }}>
                            </i>
                        )}

                    {this.props.eachState}
                </ListGroupItem>
                <Collapse isOpen={this.state.isOpen}>
                    <Cities cities={this.state.cities} />
                </Collapse>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    post: state.post,
    auth: state.form
})


export default connect(mapStateToProps, { getForSaleTowns })(State)

class Cities extends Component {

    render() {
        // console.log(this.props)

        return (
            <div>
                <ListGroup >

                    {this.props.cities.map((city, index) => (
                        <ListGroupItem key={index} style={{ fontSize: '11px' }} className='border-0' tag="a" href="#">
                            {city}
                        </ListGroupItem>
                    ))}
                </ListGroup>

            </div>
        )
    }
}


const mapStateToProps = state => ({
    post: state.post,
    auth: state.form
})


export default connect(mapStateToProps)(Cities)

Объяснение: States => State => Cities

Получение всех состояний из базы данных, сопоставление их друг с другом для определения их собственного состояния, затем вызов города в этом состоянии путем отправки другого действия редукция и получение городов в указанном c государстве.

приведенный выше код работает нормально, единственное, когда я нажимаю на одно состояние, открывается коллапс и отображаются города из этого состояния. однако, если я нажимаю на другое государство, меняются города из-за переизбытка и, следовательно, меняется приведенный выше список.

вот фотография, которая объясняет, что я имею в виду:

Как я могу сделать так, чтобы в каждом штате было перечислены его собственные города, вместо того чтобы все они стали одинаковыми

Answer 1

componentDidUpdate(prevProps) {
        if (this.props.post[state_id].cities !== prevProps.post[state_id].cities) {
            this.setState({
                cities: this.props.post.cities
            })
        }
    }

post Reducer
export const postReducer = (state, action) => {
  [...Old code]
  case [TOWN_FETCH_SUCCESS]: 
  return {
    ...state,
    // your unique identifier for each state
    [state_id]: action.payload
 }
}

При сохранении вы можете сохранять города внутри этого идентификатора штата