React / Redux TypeError：this.state.dryRedBottles.map不是一个函数

Question

I have a container component that fetches data to a Rails API but can't successfully iterator over that data without getting the following error;

TypeError: this.state.dryRedBottles.map is not a function

This was caused by the following code;

    render() {

    let searchResults = this.state.dryRedBottles.map((bottle) =>  <SearchResults key={bottle} name={bottle}/>)

As you can see in the code above, I am setting a variable equal to an iteration over this.state.dryRedBottles, which should map every bottle object to the presentational component SearchResults.

I also created a function, generateSearchResults to debug this.props and this.state. this.state.dryRedBottles is by default an empty array, but it's updated to be an array of objects. Since iterators like .map or .forEach only work on arrays, I tried to mitigate this on my Rails server;

def create 
    @wine_bottles = WineBottle.all 

    if params[:dryRedBottles][:fetchingRedDry] == true
        @red_dry_bottles = []

        @wine_bottles.each do |bottle|
            if (bottle.w_type == 'red') & (bottle.dry == true)
                bottle = [bottle] if !bottle.is_a?(Array)
                @red_dry_bottles.push(bottle)
            end 
        end
        render json: @red_dry_bottles
    else
        nil;
    end 
end 

I made sure each JSON object was push inside of an array, so at least this.state.dryRedBottles would return this; [[{}], [{}], [{}]].

My question is: what is causing this error? What workarounds can I leverage to successfully use searchResults?

Below is my container component in its full glory;

class Red extends Component {

    constructor(props) {
        super(props);

        this.state = {
            // helps monitor toggling
            redDryClick: false,
            redBothClick: false,
            redSweetClick: false,
            fetchingRedDry: false,
            fetchingRedSweet: false,

            dryRedBottles: []
        };
    };

    handleSweetRequest = (event) => {
        event.preventDefault();

        this.setState(prevState => ({
            redDryClick: !prevState.redDryClick,
            redBothClick: !prevState.redBothClick
          }));
    }

    handleDryRequest = (event) => {
        event.preventDefault();
        this.setState(prevState => ({
            redSweetClick: !prevState.redSweetClick,
            redBothClick: !prevState.redBothClick,
            fetchingRedDry: !prevState.fetchingRedDry
        }));
    }

    componentDidUpdate(){
        if (this.state.fetchingRedDry === true) {
            let redDryState = Object.assign({}, this.state);
            this.props.fetchDryReds(redDryState);

            // this.props.dryRedBottles.length > this.state.dryRedBottles.length

            if (this.props.dryRedBottles !== this.state.dryRedBottles ) {
                this.setState({ dryRedBottles: this.props.dryRedBottles });
            }
        }
        debugger;
    }

    handleBothRequest = (event) => {
        event.preventDefault();

        this.setState(prevState => ({
            redDryClick: !prevState.redDryClick,
            redSweetClick: !prevState.redSweetClick
        }));
    }

    generateSearchResults = () => {
        debugger;
        if ( Array.isArray(this.props.dryRedBottles) ) {
            this.props.dryRedBottles.map((bottle) => {
                debugger;
                return bottle;
            })
        }
    }

    render() {

        let searchResults = this.state.dryRedBottles.map((bottle) =>  <SearchResults key={bottle} name={bottle}/>)

        return (
            <div>
                <h2>Welcome to... Red</h2>

                <FormControlLabel
                    control={
                    <Switch
                        // configuring @material-ui Switch componanet
                        value="hidden"
                        color="primary"
                        id="redSweet"
                        disableRipple

                        // handles previous State + redux + API call
                        onChange={this.handleSweetRequest}
                        disabled={this.state.redSweetClick}
                    />
                    }
                    label="Sweet"
                />


                <FormControlLabel
                    control={
                    <Switch
                        // configuring @material-ui Switch componanet
                        // value="hidden"
                        value="RedDry"
                        color="primary"
                        id="redDry"
                        disableRipple

                        // handles previous State + redux + API call
                        onChange={(event) => this.handleDryRequest(event)}
                        disabled={this.state.redDryClick}
                    />
                    }
                    label="Dry"
                />


                <FormControlLabel
                    control={
                    <Switch
                        // configuring @material-ui Switch componanet
                        value="hidden"
                        color="primary"
                        id="redBoth"
                        disableRipple

                        // handles previous State + redux + API call
                        onChange={this.handleBothRequest}
                        disabled={this.state.redBothClick}
                    />
                    }
                    label="Both"
                />

                <div>
                    {searchResults}
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        dryRedBottles: state.redWineReducer
    };
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        fetchDryReds: fetchDryReds
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Red);

Below is my actionCreator;

    export function fetchDryReds(redDryState) {
  return (dispatch) => {
    // debugger;
    // dispatch({ type: 'LOADING_DRY_REDS' });
    return fetch('http://localhost:3001/wine_bottles', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'},
      body: JSON.stringify({dryRedBottles: redDryState})})
      .then(response => response.json())
      .then(dryRedBottles => {
        dispatch({ type: 'FETCH_DRY_REDS', dryRedBottles })});
  }
}

Below is my reducer;

    export default function redWineReducer (state={}, action) {
switch (action.type) {
    case 'FETCH_DRY_REDS':
        // debugger;
        return action.dryRedBottles
    default: 
        return state;
}

}

This is the array of objects I am attempting to iterate over;

Answer 1

the initial state is an object... not an array so:

export default function redWineReducer (state={}, action) {

change it to:

export default function redWineReducer (state=[], action) {