I am facing this error when I am trying to set my state coming from Fetched API data using Redux actions to pass it to my component and using mapStateToProps in my use case. As it is visible that in my mapStateToProps I am getting the response getAllQuestions but as soon when It was called into setState the questions state it is giving me an error even my actions are properly declared.

import React, { Component } from "react";

import { Row, Col, Card, CardBody, Container, Button } from "reactstrap";
// Editable
import BootstrapTable from "react-bootstrap-table-next";
import cellEditFactory from "react-bootstrap-table2-editor";


import { fetchAllQuestions } from "../../redux/actions/questionActions";

import { connect } from "react-redux";

const columns = [
  {
    dataField: "sl no.",
    text: "S No.",
    formatter: (cell, row, rowIndex, formatExtraData) => {
      return rowIndex   1;
    },
    sort: true,
  },
  {
    dataField: "text",
    text: "Question",
    sort: true,
  },
  {
    dataField: "answers",
    text: "Answers",
    sort: true,
  },
  {
    dataField: "tag",
    text: "Tag",
    sort: true,
  },
  {
    dataField: "keyword",
    text: "Keywords",
    sort: true,
  },

  {
    dataField: "gender",
    text: "Gender",
    sort: true,
  },
];

class EditableTables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      breadcrumbItems: [
        { title: "Tables", link: "#" },
        { title: "Editable Tables", link: "#" },
      ],
      questions: [],
    };
  }

  async componentDidMount() {
    console.log('this.props.Questions', this.props.Quko);
    await this.props.getAllQuestions(this.props.user._id);
    await this.setState({ questions: [...this.props.Quko] });
  }

  render() {
    return (
      <React.Fragment>
        <div className="page-content">
          <Container fluid>
            <Row>
              <Col xs={12}>
                <Card>
                  <CardBody>
                    <div className="table-responsive">
                      <BootstrapTable
                        keyField="id"
                        data={this.state.questions}
                        columns={columns}
                        cellEdit={cellEditFactory({ mode: "click" })}
                      />
                    </div>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Container>
        </div>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  console.log("state", state.question.questions.response);
  return {
    user: state.auth.user,
    Quko: state.question.questions.response,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    getAllQuestions: (userId) => dispatch(fetchAllQuestions(userId)),
  };
};

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

my actions file

export const fetchAllQuestions = (body, navigate) => async (dispatch) => {
  console.log("QUESTION BODY", body);
  const questionData = {
    customer_id: body,
  };
  console.log("QUESTION DATA", questionData);
  let response;
  try {
    await fetch(SERVER_URL   "/questions", {
      method: "POST", // *GET, POST, PUT, DELETE, etc.
      mode: "cors", // no-cors, *cors, same-origin
      headers: {
        "Content-Type": "application/json",
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
      redirect: "follow", // manual, *follow, error
      body: JSON.stringify(questionData), // body data type must match "Content-Type" header
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("Success:", data);
        if (data.statusCode === 200) {
          console.log("QUESTION FETCH SUCCESS");
          response = data;
          dispatch({
            type: actionTypes.GET_ALL_QUESTION,
            payload: {
              response,
            },
          });
        } else if (data.statusCode === 409) {
          console.log("QUESTION FETCH FAILED", data);
          response = data;
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });
    console.log("QUESTION FETCH RESPONSE", response);
  } catch (error) {
    console.log("error", error);
  }
  return response;
};

CodePudding user response：

Quko is not an array try this:

const mapStateToProps = (state) => {
  console.log("state", state.question.questions.response);
  return {
    user: state.auth.user,
    Quko: state.question.questions.response?.gettAllQuestions,
  };
};

CodePudding user response：

"this.props.Quko is not iterable" is happening because the syntax [...this.props.Quko] requires this.props.Quko to be an array.

When you log this.props.Quko, you're getting an object. If you're hoping to deconstruct the array that's in there, what you want is:

[...this.props.Quko.getAllQuestions]