How can I resolve TS7015 in my TypeScript/Next.js/React project when using an index expression that is not of type number?

huangapple
go评论102阅读模式
英文:

How can I resolve TS7015 in my TypeScript/Next.js/React project when using an index expression that is not of type number?

问题

I Got Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015) error
我遇到了“Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)”错误。

I have Improted this file
我已经导入了这个文件。

import { useAmazon } from "@context/amazon";

I have Used hear
我在这里使用了。

const { data, current_product } = useAmazon();

and Got error
然后出现了错误。

const main_image = data[current_product].main_image; // error in current_product

@context/amazon file
@context/amazon 文件

  1. import { JSObject } from "@classes/JSObject";
  2. import React, { useState, useEffect, useContext, createContext } from "react";
  3. import axios from "axios";
  4. import { Product } from "types";
  6. type AmazonContextType = {
  7.   data: Product[] | null;
  8.   current_product: string;
  9.   setProduct: (product: string) => void;
  10.   offers: JSObject | null;
  11.   setOffers: (offer: JSObject | null) => void;
  12. };
  14. type Props = {
  15.   children: React.ReactNode;
  16. };
  18. const amazonDefault: AmazonContextType = {
  19.   data: null,
  20.   current_product: '',
  21.   setProduct: () => undefined,
  22.   offers: null,
  23.   setOffers: () => undefined,
  24. };
  26. const AmazonContext = createContext<AmazonContextType>(amazonDefault);
  28. export function useAmazon() {
  29.   return useContext(AmazonContext);
  30. }
  32. export function AmazonProvider({ children }: Props) {
  33.   const [data, setData] = useState(amazonDefault.data);
  34.   const [current_product, setProduct] = useState(amazonDefault.current_product);
  35.   const [offers, setOffers] = useState(amazonDefault.offers);
  37.   useEffect(() => {
  38.     const fetchData = async () => {
  39.       const url =
  40.         "https://getdata.com/abc";
  41.       const result = await axios(url);
  42.       setData(result.data.payload);
  43.     };
  44.     fetchData();
  45.   }, []);
  47.   return (
  48.     <AmazonContext.Provider
  49.       value={{ data, current_product, setProduct, offers, setOffers }}
  50.     >
  51.       {children}
  52.     </AmazonContext.Provider>
  53.   );
  54. }

How i can Solve this Error
我如何解决这个错误？

const main_image = typeof current_product === 'string' ? data[current_product as keyof typeof data].main_image : null;

I have also try chatGPT and google bard
我也尝试了 chatGPT 和 Google Bard。

Keywords:
关键词:
typescript
TypeScript
next.js
Next.js
reactjs
React.js
javascript
JavaScript
json
JSON

英文:

I Got Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015) error

I have Improted this file
import { useAmazon } from &quot;@context/amazon&quot;;

I have Used hear
const { data, current_product } = useAmazon();

and Got error
const main_image = data[current_product].main_image; // error in current_product

@context/amazon file

  1. import { JSObject } from &quot;@classes/JSObject&quot;;
  2. import React, { useState, useEffect, useContext, createContext } from &quot;react&quot;;
  3. import axios from &quot;axios&quot;;
  4. import { Product } from &quot;types&quot;;
  5. type AmazonContextType = {
  6. data: Product[] | null;
  7. current_product: string;
  8. setProduct: (product: string) =&gt; void;
  9. offers: JSObject | null;
  10. setOffers: (offer: JSObject | null) =&gt; void;
  11. };
  12. type Props = {
  13. children: React.ReactNode;
  14. };
  15. const amazonDefault: AmazonContextType = {
  16. data: null,
  17. current_product: &#39;&#39;,
  18. setProduct: () =&gt; undefined,
  19. offers: null,
  20. setOffers: () =&gt; undefined,
  21. };
  22. const AmazonContext = createContext&lt;AmazonContextType&gt;(amazonDefault);
  23. export function useAmazon() {
  24. return useContext(AmazonContext);
  25. }
  26. export function AmazonProvider({ children }: Props) {
  27. const [data, setData] = useState(amazonDefault.data);
  28. const [current_product, setProduct] = useState(amazonDefault.current_product);
  29. const [offers, setOffers] = useState(amazonDefault.offers);
  30. useEffect(() =&gt; {
  31. const fetchData = async () =&gt; {
  32. const url =
  33. &quot;https://getdata.com/abc&quot;;
  34. const result = await axios(url);
  35. setData(result.data.payload);
  36. };
  37. fetchData();
  38. }, []);
  39. return (
  40. &lt;AmazonContext.Provider
  41. value={{ data, current_product, setProduct, offers, setOffers }}
  42. &gt;
  43. {children}
  44. &lt;/AmazonContext.Provider&gt;
  45. );
  46. }

How i can Solve this Error

const main_image = typeof current_product === &#39;string&#39; ? data[current_product as keyof typeof data].main_image : null;
I have also try chatGPT and google bard

keyword
typescript
next.js
reactjs
javascript
json

答案1

得分: 0

你不能使用方括号语法通过对象的属性访问该项。
假设current_product是产品的name（可能是id，但我看不到Product类型），您需要执行以下操作：

  1. const main_image = data !== null ? data.find(product => product === current_product).main_image : null;
英文:

You can't access the item by a property of the object using the square bracket syntax.
Assuming that current_product is the name of the product (might be id, but I can't see the Product type), you need to do the following:

  1. const main_image = data !== null ? data.find(product =&gt; product === current_product).main_image : null;

huangapple
  • 本文由 发表于 2023年6月1日 21:01:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76382170.html
  • javascript
  • json
  • next.js
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定