CODEWITHSUNDEEP
reactjstypescriptreduxnext.jsredux-saga
Yilmaz
Yilmaz

Reputation: 49619

If I navigate with Router.push() in next.js, I get: TypeError: products.map is not a function

I am using redux saga in the project. here is the state:

const productList = useSelector((state: RootState) => state.productList); const { loading, error, products, page, pages } = productList;

I dispatch fetchProductsStart in useEffect:

useEffect(() => {
    dispatch(fetchProductsStart());
    if (!userInfo?.isAdmin) {
      Router.push("/login");
    }
  }, [dispatch, userInfo]);

This is how I render the products:

      {products &&
              products.map((product) => (
                <tr key={product.id}>
                  <td>{product.id}</td>
                  <td>{product.name}</td>
                  <td>${product.price}</td>
                  <td>{product.category}</td>
                  <td>{product.brand}</td>
                  <td>
                    <Link href={`/admin/product/edit/${product.id}`}>
                      <Button variant="light" className="btn-sm">
                        <FontAwesomeIcon icon={faEdit}></FontAwesomeIcon>
                      </Button>
                    </Link>
                    <Button
                      variant="danger"
                      className="btn-sm"
                      onClick={() => deleteHandler(product.id)}
                    >
                      <FontAwesomeIcon icon={faTrash}></FontAwesomeIcon>
                    </Button>
                  </td>
                </tr>
              ))}

Thsi works if I visit page manually. "admin/productlist". How ever When i click edit button, I m redirected to "admin/product/edit/[id]" and when I click on update button I programmically navigated to "admin/productlist" I m getting "TypeError: products.map is not a function". I navigate inside saga function:

function* productUpdateAsync(action: IProductUpdateStart) {
  try {
    const getState = (state: RootState) => state.user;
    const { userInfo } = yield select(getState);
    const config = {
      headers: {
        "Content-type": "application/json",
        Authorization: `Bearer ${userInfo.token}`,
      },
    };
    const { data } = yield axios.put(
      `${process.env.DJANGO_API_URL!}/api/products/update/${
        action.payload.id
      }/`,
      action.payload.data,
      config
    );
    yield put(productUpdateSuccess(data));
    Router.push(`${process.env.BASE_URL}/admin/productlist`);
  } catch (e) {
    yield put(productUpdateFailure(e.message));
  }
}

I dont understand why page is throwing error If I am programmicatly navigated.

Upvotes: 0

Views: 632

Answers (1)

yuri_gagarin
yuri_gagarin

Reputation: 1

check the composition of your { data } object which you get back from the Axios.put() request. I assume youre supposed to get back an updated Product and your <productUpdateSuccess(data)> function is supposed to be updating the Array of Products. Are you sure you're not overriding the Products Array in your state with another data type? map() function only exists as Array.prototype.map()

Upvotes: 0

Related Questions