javascript - 如何使用 React 映射数组
问题描述
这是我的 React 代码,我正在映射一个对象数组,但得到错误 [期望一个赋值或函数调用,而是看到一个表达式] 所以请帮助我如何解决这个问题..?在我的代码中,我想将数据映射到 bootstrap 4 carousel 滑块代码,在我的数据中,我有照片、姓名、成就,那么我该如何映射 3 个 ..!
import React, { useState, useEffect } from "react";
import web from "../../image/nisha.jpg";
import web1 from "../../image/Pooja.jpg";
import web2 from "../../image/6547.jpg";
import { isAutheticated } from "../../auth/helper/index";
import { getTestis } from "../helper/coreapicalls";
import "../../styles.scss";
import ReactReadMoreReadLess from "react-read-more-read-less";
const Testimonial1 = () => {
const [testimonial, setTestimonial] = useState([]);
const [error, seterror] = useState([]);
const [loading, setLoading] = useState(false);
const token = isAutheticated() && isAutheticated().token;
const userId = isAutheticated() && isAutheticated().user.email;
useEffect(() => {
loadTestimonial();
}, []);
const loadTestimonial = () => {
getTestis().then((data) => {
if (data.error) {
seterror(data.error);
} else {
setTestimonial(data);
console.log(data);
}
});
setLoading(true);
};
console.log(testimonial);
return (
<div>
<h1 className="blog_heading">Testimonials</h1>
<div className="testimonial">
<div
id="carouselExampleSlidesOnly"
className="carousel slide"
data-ride="carousel"
>
<div className="carousel-inner active container">
{testimonial.map((testi, index) => {
<div className="carousel-item active" key={index}>
<div className="testimonial_content">
<a href={web}>
<img
src={web}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1>{testi.name}</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
{testi.achievement}
</ReactReadMoreReadLess>
</p>
</div>
</div>;
})}
</div>
</div>
</div>
</div>
);
};
export default Testimonial1;
解决方案
只需将您的地图代码替换为:
testimonial.map((testi, index) => {
return (
<div className="carousel-item active" key={index}>
<div className="testimonial_content">
<a href={web}>
<img
src={web}
alt="img"
className="rounded-circle img-fluid "
/>
</a>
<h1>{testi.name}</h1>
<p>
<sup>
<i
className="fa fa-quote-left mr-2"
style={{ fontSize: "14px", color: "#ffca08" }}
aria-hidden="true"
></i>
</sup>
<ReactReadMoreReadLess
charLimit={200}
readMoreText={"Read more ▼"}
readLessText={"Read less ▲"}
readMoreStyle={{ color: "#00ba74", fontSize: "15px" }}
>
{testi.achievement}
</ReactReadMoreReadLess>
</p>
</div>
</div>;
)
})
推荐阅读
- python - 在获取模型对象时如何使用 try 和 except?
- node.js - 引擎“节点”与此模块不兼容。预期版本“7.5.0”。得到“15.13.0”
- javascript - 为自定义 CMS 系统加载网站内容的策略
- .htaccess - 缓存和压缩和缩小wordpress的代码
- linux - 在bash中检索系统中的用户名
- sharepoint-online - Power Automate 运行历史记录
- c++ - 从函数传递到主函数时,C++ 如何处理向量?
- javascript - 如何从数组中的对象中读取值
- python - Jupyter Dropdown ipywidget 显示错误的数据框
- ruby-on-rails - 添加 Node buildpack 后 Rails 应用程序不会部署