在我的反应网站中映射理智模式时出错

Question

我正在尝试映射一个健全的模式，但我无法这样做，如果有人知道请帮助我：

这是我要遍历的 sanity schema categories.js，这里我要遍历包含图像数组的图像类型的特征数组

export default{
    name: 'categories',
    title: 'Categories',
    type: 'document',
    fields: [
        {
            name: 'category',
            title: 'Category (eg Clothing)',
            type: 'string',
        },
        {
            name:'features',
            title: 'Features',
            type: 'array',
            of: [
              {
                name:'featureimg',
                title: 'Feature Image',
                type:'image',
                options: {
                  hotspot: true,
                },
              },
            ]
          },
    ]
}

这是反应组件 product.js，我正在其中遍历数组，但我无法这样做

import React, { useState, useEffect } from "react";
import { urlFor, client } from "../../client";

const Product = () => {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const query1 = '*[_type == "categories"] | order(title asc)';

    client.fetch(query1).then((data) => {
      setCategories(data);
      // console.log(categories[1].features.length);
      // console.log(urlFor(categories[1].features[1].featureimg));
    });
  }, []);

  return (
    <div>
      <div className="app__work-filter">
        {categories.map((item, index) => (
          <div key={index}>
            <div>
              {item.category}
              <div> **Main part where error is happening**
                {item.features.map((feature, index) => (
                  <img
                    src={urlFor(feature.featureimg)}
                    alt=" "
                    loading="lazy"
                  />
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Product;

这是用于从 sanity 中获取内容的 client.js

import { createClient } from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = createClient({
  projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2023-04-01',
  useCdn: true,
  token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

这是我得到的错误

Waning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
 
Uncaught Error: Unable to resolve image URL from source (undefined)
    at urlForImage (urlForImage.ts:43:1)
    at ImageUrlBuilder.url (builder.ts:252:1)
    at ImageUrlBuilder.toString (builder.ts:257:1)
    at testStringCoercion (react-dom.development.js:259:

我已经尝试过 .url() 选项，但它没有用。

// console.log(categories[1].features.length);
// console.log(urlFor(categories[1].features[1].featureimg));

两个控制台日志都工作正常

我尝试并测试了所有内容，但我无法得到我所缺少的，我在同一个反应应用程序中使用相同的 client.js 文件在许多地方使用了相同的映射逻辑。但是在这里，当我在映射内部进行映射时，出现了这个错误。请帮助如果有人知道

Answer 1

urlFor

 中的 

client.js

函数返回一个

ImageUrlBuilder

实例而不是字符串。

尝试修改

urlFor

以返回字符串而不是

ImageUrlBuilder

实例，看看它是否解决了您的问题。

export const urlFor = (source) => builder.image(source).url();

Answer 2

          <div> **Main part where error is happening**
            {item.features.map((feature, index) => (
              <img
                src={urlFor(feature)}***
                alt=" "
                loading="lazy"
              />
            ))}
          </div>

我只是删除了“.featureImg”并且它起作用了，子数组只有一个项目，所以我们不需要遍历它，我们可以将整个数组传递给 SANITY URLFOR