Reactjs 在react组件中显示两个不同数组的值

我正在构建一个react应用程序，它将显示课程和作者，课程和作者数组的我必须显示课程及其相应作者的列表。 我使用了数组映射方法来映射所有课程并显示它们，但是我被如何显示相应的作者所困扰。 下面是我的代码

    import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";

function CourseList(props) {
  return (
    <table className="table">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Title</th>
          <th>Author Name</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        {props.courses.map(course => {
          return (
            <tr key={course.id}>
              <td>
                <button
                  className="btn btn-outline-danger"
                  onClick={() => {
                    props.deleteCourse(course.id);
                    toast.success("Course Deleted");
                  }}
                >
                  Delete
                </button>
              </td>
              <td>
                <Link to={"/course/" + course.slug}>{course.title}</Link>
              </td>
              <td>{props.authors.name}</td>
              <td>{course.category}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

CourseList.propTypes = {
  deleteCourse: PropTypes.func.isRequired,
  courses: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      authorId: PropTypes.number.isRequired,
      category: PropTypes.string.isRequired
    })
  ).isRequired
};

export default CourseList;

从“React”导入React；
从“道具类型”导入道具类型；
从“react router dom”导入{Link}；
从“react toastify”导入{toast}；
功能课程列表（道具）{
返回(
标题
作者姓名
类别
{props.courses.map（课程=>{
返回(
{
props.deleteCourse（course.id）；
敬酒。成功（“课程删除”）；
}}
>
删去
{课程名称}
{props.authors.name}
{course.category}
);
})}
);
}
CourseList.propTypes={
deleteCourse:PropTypes.func.isRequired，
课程：PropTypes.arrayOf(
PropTypes.shape({
id:PropTypes.number.isRequired，
标题：PropTypes.string.isRequired，
authorId:PropTypes.number.isRequired，
类别：PropTypes.string.isRequired
})
).需要
};
导出默认课程列表；

下面是我的回答

任何人都可以帮助我在作者姓名单元格中显示作者姓名。

将

{props.authors.name}

更改为

{course.authors.name}

不需要使用道具，因为您是从数组访问的，所以只需访问数组的对象字段即可

如果未找到

course.authors.name

，只需控制您的作者姓名，然后访问该名称即可

---

嗯。。查看您的JSON响应。。这可能行得通

<td>{props.authors.find(author => author.id === course.authorId).name}</td>

{props.authors.find（author=>author.id==course.authord.name}

什么是道具.作者.姓名？不应该是

课程.authors.name

？在课程数组中没有name元素，authors中有authorsarray@ZahidHussain共享您的json响应。这是我的作者数据

[{“id”：1，“name”：“Cory House”}，{“id”：2，“name”：“Scott Allen”}，{“id”：3，“name”：“Dan Wahlin”}]

是这样的可能性

让课程=[…道具.课程]；courses.map（course=>{course.authorName=“zahid Hussain”；return course；}）但我使用的是硬编码的名称，而不是我必须从作者那里获取的名称array@ZahidHussain编辑您的帖子并分享您的json响应，而不是您所做的