Next.js-警告:道具`dangerouslySetInnerHTML`不匹配

时间:2020-06-29 18:34:50

标签: javascript reactjs next.js

我使用Next.js,并且从API调用中获得了content密钥。我正在尝试使用content渲染此dangerouslySetInnerHTML键,但出现错误:(

错误: Error Image

我的功能

function Post({ content }) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

我的API调用返回此JSON:

{
  "posts": [
    {
      "id": "d27a1b6ff17a",
      "title": "A’dan Z’ye Typescript",
      "thumbnail": "https://cdn-images-1.medium.com/max/1024/1*9eMyWLYOqU5aqBtVoFoi3Q.jpeg",
      "description": "Typescript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.",
      "content": "\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*9eMyWLYOqU5aqBtVoFoi3Q.jpeg\"><figcaption>A’dan Z’ye Typescript</figcaption></figure><h3>Typescript Nedir?</h3>\n<p>Typescript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.</p>\n<h3>Typescript Özellikleri</h3>\n<p>★ <strong>Typescript = Javascript’tir: </strong>Typescript temel yapı taşlarını Javascript’ten alır. Bu nedenle Typescript’i öğrenmeden önce Javascript yetkinliğinizin olması gerekir. Typescript ile yaptığınız bütün geliştirmeleriniz, <em>makalenin kurulum adımında</em> da göreceğiniz üzere Javascript’e dönüştürülür.</p>\n<p>★ <strong>Typescript, tüm Javascript kütüphanelerini destekler: </strong>Typescript ile derlenen javascript çıktısı, bütün javascript kütüphaneleri ile birlikte kullanılabilir.</p>\n<p>★ <strong>Typescript, taşınabilir ve portatiftir: </strong>TypeScript platform-serbest bir dildir ve farklı tarayıcılarda, cihazlarda, işletim sistemlerinde çalışabilir. javascript’in çalıştığı herhangi bir ortamda çalışabilir. Hali hazırda javascript ile geliştirilme yapılan bir projeye entegre edilebilir.</p>\n<h3>Typescript Avantajları</h3>\n<p>★ Typescript, nesne yönelimlidir.</p>\n<p>★ Typescript, statik veri tiplemesine sahiptir.</p>\n<p>★ Typescript, ES6 özelliklerini içeririnde barındırır.</p>\n<p>★ Typescript, modülerdir.</p>\n<p>★ Typescript’in söz dizimi Java, C# gibi yüksek seviyeli dillere benzerdir.</p>\n<p>Typescript kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve javascript çıktısının oluşturulması gerekiyor.</p>\n<p>Eğer hemen typescript yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, <a href=\"https://codepen.io/\">Codepen</a>’i veya Typescript’in kendi dokümantasyon sayfasındaki <a href=\"https://www.typescriptlang.org/\">Playground</a>’ı kullanabilirsiniz.</p>\n<h3>Typescript Kurulumu</h3>\n<p>Typescript’i kurabilmek için ilk başta bilgisayarımızda <a href=\"https://nodejs.org/en/\">Node Js</a>’in kurulu olması gerekiyor. Ardından terminal üzerinden,</p>\n<pre>npm install -g typescript</pre>\n<p>komutunu çalıştıralım.</p>\n<p>Şimdi örnek olarak, terminal üzerinden typescript yazmak istediğimiz dizine ilerleyerek, dizinimizde bir <strong>main.ts </strong>oluşturalım ve içerisine,</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/556/1*oOnjxB0OGhrsOgEXy8v0mw.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/typescript-kurulumu/main.ts\">main.ts</a></figcaption></figure><p>bu kodları yazalım.</p>\n<p>Ardından,</p>\n<pre>tsc main.ts -w</pre>\n<p>komutunu terminalde çalıştıralım.</p>\n<p>Bu komut ile ana dizinimde bulunan <strong>main.ts</strong> dosyası javascript’e dönüştürülerek, ana dizine çıktılandı ve ana dizindeki <strong>main.js </strong>dosyasının içeriği,</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/456/1*cCS83D3i4IIgmKi-GDXDmg.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/typescript-kurulumu/main.js\">main.js</a></figcaption></figure><p>bu şekilde oldu.</p>\n<blockquote>\n<strong>-w</strong> parametresi main.ts dosyasıdaki değişikliklerin anlık olarak izleneceği ve dosya içerisindeki kodların anlık olarak main.js dosyasına çıktılanacağı anlamına gelir. Zorunlu bir parametre değildir.</blockquote>\n<p>Bu sayede ilk typescript kodumuzu yazmış ve derlemiş olduk. ?</p>\n<h3>Yapılandırma (Configuration) ve Klasör Yapısı</h3>\n<p>Terminalde,</p>\n<pre>tsc --init</pre>\n<p>komutunu çalıştırdıktan sonra. dizinimizde <strong>tsconfig.json </strong>dosyası oluşacaktır. Dizinizimde oluşan config dosyasındaki parametreleri düzenleyerek örnek bir klasör yapısı oluşturalım.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*AiKdv8E3EJrb-BM7e6co-Q.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/yapilandirma-configuration-ve-klasor-yapisi/tsconfig.json\">tsconfig.json</a></figcaption></figure><p>Bu yapılandırma dosyasına göre, <strong>src </strong>dizini içerisinde yer alan<strong> .ts</strong> dosyalarımız <strong>dist </strong>dizinine çıktılanacaktır.</p>\n<h3>Statik Veri Tiplemesi (Static Type Checking) Nedir?</h3>\n<p>Typescript ile değişkenler, fonksiyonlar, ve fonksiyon parametreleri için <strong>tip kontrolü (type checking)</strong> yapabilirsiniz.</p>\n<h4>Özellikleri</h4>\n<p>★ Tamamen isteğe bağlıdır.</p>\n<p>★ Hataları bulmanıza ve önlemenize yardımcı olur.</p>\n<p>★ Daha açıklayıcı ve okunaklı kod yazmanızı sağlar.</p>\n<h3>Tipler</h3>\n<p>★ <strong>String: </strong>Metinsel veri türleri için kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/666/1*5OprU4uC9LrJXy6tMVwXfw.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/string.ts\">string.ts</a></figcaption></figure><p>★ <strong>Number: </strong>Sayısal veri türleri için kullanılır. ES6 ile gelen ikili ve sekizli değerleri de destekler.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/698/1*tVdEEpmEDGUr40JRct2wAw.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/number.ts\">number.ts</a></figcaption></figure><p>★ <strong>Boolean: </strong>true/false değerler için kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/734/1*ueaEdEtnQqrvWddO_BoIWA.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/boolean.ts\">boolean.ts</a></figcaption></figure><p>★ <strong>Array: </strong>Dizi tanımlamaları için kullanılır. İki farklı yazım şekli vardır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/888/1*zk2rzKnBARtT4AXZZRrSyQ.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/array.ts\">array.ts</a></figcaption></figure><p>★ <strong>Any: </strong>Bilinmeyen değişken tipleri için kullanılır. Örneğin, dinamik değerler içeren değişkenler için kullanılabilir.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*lyn1g-lRMDNX54uEOhUqdg.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/any.ts\">any.ts</a></figcaption></figure><p>★ <strong>Void: </strong>Geriye herhangi bir değer <strong>return</strong> etmeyen fonksiyonlarda ve <strong>null</strong> veya <strong>undefined </strong>değer içeren değişkenlerde kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*10VYRj5ZK1TtVFDOL3T9kA.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/void.ts\">void.ts</a></figcaption></figure><p>★ <strong>Null: </strong>null<strong> </strong>değer içeren değişkenlerde kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/574/1*bcK30V9s3SyOptXzVTCN7w.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/null.ts\">null.ts</a></figcaption></figure><p>★ <strong>Undefined: </strong>undefined<strong> </strong>değer içeren değişkenlerde kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/810/1*eFdkVUOz_LGSBHa9OorA_Q.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/undefined.ts\">undefined.ts</a></figcaption></figure><p>★ <strong>Tuple: </strong>Grup türleri bilinen ancak aynı olması gerekmeyen dizilerde kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/846/1*rsz6lblfyIrzHzC4hncp8Q.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/tuple.ts\">tuple.ts</a></figcaption></figure><p>★ <strong>Enum: </strong>Obje içerisindeki key’lere veya key değerlerine daha kolay erişmek için kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/768/1*7Oc6M8lT-Y2SkVTONEpsrg.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-1.ts\">enum-1.ts</a></figcaption></figure><p>Key değerleri, <strong>varsayılan olarak 0'dan başlar</strong> ancak bunu değiştirmek mümkündür.</p>\n<p>Tek bir key’in değerini veya birden fazla key’in değerini değiştirebiliriz. ??</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1020/1*hq2NWx3EozsjqP0ZcH9Kig.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-2.ts\">enum-2.ts</a></figcaption></figure><p>Key’lere erişmek için indis numarasını yazmamız yeterli. ?</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/842/1*uKJ_psMseqWPwsU5mbDakw.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-3.ts\">enum-3.ts</a></figcaption></figure><h3>Takma Adlar (Type Alias)</h3>\n<p><strong>type </strong>sözcüğü ile tanımlanan ifadeler, tipleri içerisinde tutar ve bu tipleri birden fazla yerde kullanmamıza olanak tanır. ?</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*0ViwhQ4CqpOUfulf4XK0TQ.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/alias/alias.ts\">alias.ts</a></figcaption></figure><p>Yukarıdaki örnekte yer alan <strong>user </strong>alias’ı hem <strong>string</strong> tipindeki değişkenleri hem de <strong>object </strong>tipindeki değişkenler için tip kontrolünü sağlar.</p>\n<h3>Fonskiyonlar</h3>\n<p>★ <strong>Void: </strong>Geriye herhangi bir değer <strong>return</strong> etmeyen fonksiyonlarda kullanılır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*86GKkerviGtnVOUFQs4O5w.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/void.ts\">void.ts</a></figcaption></figure><p>★ <strong>Geriye Değer Döndürebilen Fonksiyonlar:</strong></p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*KzF3Mc3x8l5IQwayERp3Gg.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/object.ts\">object.ts</a></figcaption></figure><p>Yukarıdaki örnek, <strong>object </strong>tipinde parametre alan ve geriye <strong>string </strong>tipinde değer döndüren bir fonksiyon kullanım örneğidir.</p>\n<p>★ <strong>Parametresi Zorunlu (Required) Olmayan Fonksiyonlar:</strong></p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*YbPR6IjZu9ky5-iZJ5eFaQ.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/parameters.ts\">parameters.ts</a></figcaption></figure><p>Yukarıdaki örnekte, <strong>action </strong>parametresi ve user objesi içinde gönderilen <strong>age </strong>anahtar kelimesi, zorunlu bir parametre değildir. Fonksiyon çalıştırıldığında bu parametreler gönderilmemiş durumsaysa bu kısım işleme alınmaz.</p>\n<h3>Sınıf Tabanlı Objeler (Class Based Object)</h3>\n<h4>Sınıflar (Classes)</h4>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*CxpirPjY83DufrkIITh-gg.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/classlar.ts\">classlar.ts</a></figcaption></figure><p>Yukarıdaki örnektede gördüğümüz üzere, sınıf içerisinde yapılan<strong> değişken tipi tanımlamaları </strong>ve method içerisine gönderilen<strong> parametrelerin tip tanımlamaları</strong>, değişkenler ve fonksiyonlardaki ile <strong>aynıdır</strong>.</p>\n<h4>Soyut Sınıflar (Abstract Classes)</h4>\n<p>Soyut sınıflar,</p>\n<p>★ Kendi instance objesinden türeyemeyen sınıflardır.</p>\n<p>★ Kendisini kullanan başka sınıfların instance’ları aracılığıyla içerisindeki özelliklere erişilmesini sağlayan sınıflardır.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*RJj5a-NEbQokaGJ-d7p1Sw.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/abstract-class-1.ts\">abstract-class-1.ts</a></figcaption></figure><p>Eğer soyut bir sınıftan instance üretmeye çalışırsak, hata alırız.</p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*AbpTIbm2TfCQed6f7wOD6A.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/abstract-class-2.ts\">abstract-class-2.ts</a></figcaption></figure><p>Yukarıdaki örnekte, Person sınıfı instance’ından türetilen obje ile <strong>hem Person</strong> sınıfı içindeki parametrelere <strong>hem de</strong> <strong>User</strong> sınıfı içindeki parametrelere erişilebilir.</p>\n<h3>Interface</h3>\n<p>Dışarıdan erişilebilir durumda olan elemanları, objelere veya sınıflara bildiren yapılardır.</p>\n<p>★ Birbirlerinden extend olabilirler.</p>\n<p>★ Birbirlerinden implement olamazlar.</p>\n<p>★ Objelere ve sınıflara atanabilirler.</p>\n<h4><strong>Objelerde Kullanımı</strong></h4>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/758/1*s7esBzbHoAXhVqXxy2qw8w.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/interface/with-object.ts\">with-object.ts</a></figcaption></figure><p>Yukarıdaki örnekte, <strong>age </strong>değeri obje içerisinde kullanımı zorunlu bir parametre olmadığı için <strong>soru işareti (?) </strong>ile birlikte kullanılmıştır.</p>\n<h4><strong>Sınıflarda Kullanımı</strong></h4>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*Ls9hK9q39OJlyOyy5T0VRw.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/interface/with-class.ts\">with-class.ts</a></figcaption></figure><p>Yukarıdaki örnekte, User sınıfı, <strong>IsPerson </strong>Interface’i içinde tanımlanmış olan özellikleri kullanmaktadır.</p>\n<h3>“public”, “private” ve “readonly”</h3>\n<p>★ <strong>public: </strong>Sınıf içerisinde kullanılan özellikleri dışarıdan <strong>erişilebilir </strong>ve<strong> değiştirilebilir </strong>hale getirir.</p>\n<p>★ <strong>private: </strong>Sınıf içerisinde kullanılan özelliklerin dışarıdan<strong> erişilebilme </strong>ve <strong>değiştirilebilme </strong>durumunu<strong> devre dışı</strong> bırakır.</p>\n<p>★ <strong>readonly: </strong>Sınıf veya Interface içerisinde kullanılan özelliklerin dışarıdan <strong>değiştirilebilme</strong> durumunu devre dışı bırakır.</p>\n<p><strong>Interface’lerde Kullanımı</strong></p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*90dOiR9etTVLmY-bR6_vLg.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/public-private-readonly/read-only-with-interface.ts\">read-only-with-interface.ts</a></figcaption></figure><p><strong>Sınıflarda Kullanımı</strong></p>\n<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*iFv2O3zffx0PJBHlMPKonQ.png\"><figcaption>Dosya Linki: <a href=\"https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/public-private-readonly/read-only-with-class.ts\">read-only-with-class.ts</a></figcaption></figure><p>Sınıf veya obje içerisindeki <strong>readonly</strong> değerleri değiştirmeye çalışırsak, hata alırız.</p>\n<h3>Sonuç</h3>\n<p>Javascript diline katı kurallar eklememize yardımcı olan Typescript, ilk başlarda göze biraz tuhaf gözükse de alıştıktan sonra geliştirme esnasında karşımıza çıkardığı hata mesajlarıyla hayatımızı kolaylaştırıyor.</p>\n<p>Bu makalede kullandığım resimlere ve paylaşmış olduğum kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.</p>\n<p>Bu linklerin tamamını görüntülemek için: <a href=\"https://github.com/yasinatesim/medium-stories/tree/master/02-a-dan-z-ye-typescript\">https://github.com/yasinatesim/medium-stories/tree/master/02-a-dan-z-ye-typescript</a></p>\n<p>linkini takip edebilirsiniz.</p>\n<p>Makaleyi hazırlarken kullandığım kaynaklar;</p>\n<p>Typescript Documentation: <a href=\"https://www.typescriptlang.org/\">https://typescriptlang.org</a></p>\n<p>The Net Ninja: <a href=\"https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI\">https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI</a></p>\n<p>Traversy Media: <a href=\"https://www.youtube.com/watch?v=rAy_3SIqT-E\">https://www.youtube.com/watch?v=rAy_3SIqT-E</a></p>\n<img src=\"https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d27a1b6ff17a\" width=\"1\" height=\"1\">\n",
      "source_website": "medium"
    },
    {
      "id": "360103",
      "title": "yasinates.com is coming soon ?",
      "thumbnail": "https://res.cloudinary.com/practicaldev/image/fetch/s--1T-3gRGP--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--dR_DndOD--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/xk5a6aaf0vqi555egtxg.jpg",
      "description": "Hello everyone ?, this is my first post.   I will share the English of my articles on medium.com here...",
      "content": "<p>Hello everyone ?, this is my first post. </p>\n\n<p>I will share the English of my articles on <a href=\"https://medium.com/@yasinatesim/\">medium.com</a> here.</p>\n\n<p>I create the data on my website using the DEV API, medium.com API, and Github API services ?</p>\n\n<p>I will write my next article is about the publishing process of my website.</p>\n\n<p>Hope to see you in new articles. ? ?</p>\n\n<p>My medium profile: <a href=\"https://medium.com/@yasinatesim/\">medium.com/@yasinatesim/</a></p>\n\n<p>My personal website: <a href=\"http://yasinates.com/\">yasinates.com</a></p>\n\n",
      "source_website": "dev"
    }
  ]
}

我尝试了这些,但无法解决问题:(

编辑:

已解决:)

最后

<img src=" ... "width ="1" height="1">

在中等API上。

content.replace(/<img(.*?)(width=\"1\")(.*?)>/, '')

谢谢。

3 个答案:

答案 0 :(得分:1)

您的api结果应该是封闭的img标签。尝试拥有:

<img .... />

代替:

<img ...>

这应该可以解决问题。如果不是,则尝试修复其他无效的html标记。错误消息表示您在html标记中存在问题。

答案 1 :(得分:0)

函数content中的

Post()将返回undefined,因为从您的api调用返回的对象没有属性content(您的函数正在使用object destructuring)。
您必须通过posts键(即帖子数组)进行迭代:

function Post({ posts}) {
  return posts.map(el=>{
     return (
       <div>
         <div dangerouslySetInnerHTML={{ __html: el.content }} />
       </div>
  )
  })
}

或者仅使用Es6语法更好

const Post = ({posts}) => posts.map(el => (
    <div>
      <div dangerouslySetInnerHTML={{ __html: el.content }} />
    </div>
))

Sandbox

答案 2 :(得分:0)

已解决:)

最后

<img src=" ... "width ="1" height="1">

在中等API上。

content.replace(/<img(.*?)(width=\"1\")(.*?)>/, '')

谢谢。