如何使用 React 對數組進行 map

Question

這是我的 React 代碼，我正在映射一個對象數組但得到錯誤 [ 預期分配或 function 調用，而是看到一個表達式] 所以請幫助我如何解決這個問題..？ 在我的代碼中，我想將 map 數據引導到引導 4 輪播 slider 代碼，在我的數據中，我有照片、姓名、成就，那么我怎么能 map 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;

Answer 1

只需將您的 map 代碼替換為：

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>;
              )
            })