ReactJS 在组件中显示带有分隔符的数组

如何解决ReactJS 在组件中显示带有分隔符的数组

有人问过这个问题，但我在这里找到的解决方案无论出于何种原因都不起作用。我的 MongoDB 中有一个数组，我试图在我的前端客户端上显示它们。像这样：类型：动作，科幻

只需调用它就会将它们作为单个文本元素引入。我试图使用 .map 函数，但每次都给我错误。

这是组件。随着我对阵列的尝试。

import React from "react";
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';

import { Link } from 'react-router-dom';

import './movie-view.scss';

export class MovieView extends React.Component {
  
  render() {
    const { movie,onBackClick } = this.props;
    return (
      <>
        <Row>
          <div>
            <img src={movie.imageUrl} />
          </div>
         </Row>
          <Row>
           //This is the part not working
           <div>
            <span> Genre: </span>
             {this.state.movies.map(movie => {
               return ( <div key={movie.genre}>
                 <Link to={`/movies/${movie.genre}`}>{movie.genre}</Link>
                </div>
               )
             })
            }
           </dl>
          </Row>
          <Row>
            <span className="Meta-text">Directed by: <Link to={`/movies/${movie.director}`}>{movie.director}</Link></span>
          </Row>
          <Row  className="text-white">
          <h1>{movie.Title}</h1>
          <p className="movie-description">{movie.description}</p>
          <div>
            <Button className="lg" variant="primary" onClick={() => {onBackClick(null);}}>Back to list</Button>
          </div>
        </Row>
      </>
    );
  }
}

export class MainView extends React.Component {
  constructor() {
    super();
    this.state = {
      movies: [],selectedMovie: null,};
  }
}

我不确定您是否需要更多上下文，如果需要，请告诉我。只是为了更好地解释第一部分，只需调用 {movie.genre} 工作正常，但结果是“ActionSci-Fi”，没有分离。感谢您的帮助！