Question

我正在React组件中映射20个字符串的数组。数组已作为道具从父级传递到此组件。当我将函数的结果传递给JSX元素（一个h1）时，它仅返回名称。当我将相同的函数传递给表单的占位符时，它将返回名称，后跟20个逗号。如果更改ID，以便map函数从数组中间返回一个不同的字符串，则它将返回名称，该名称的两侧各有10个逗号。数组中的最后一项在名称前返回20个逗号。

我尝试过让函数返回null或空字符串，或者只是不包含'else'。

功能如下：

 getTeacherName = () => {
    return this.props.teachers.map(teacher => {
      if (teacher.id == this.props.match.params.id) {
        return teacher.name;
      } else {
        return null;
      }
    });
  };

在这里，我正在使用它并获得所需的响应：

return (
    <h1>{this.getTeacherName()}'s Schedule</h1>
)

这是我正在使用它并解决问题的地方：

<input
  type="text"
  className="form-control"
  placeholder={this.getTeacherName()}
  disabled
/>

Here is a screenshot of what I'm seeing.

谢谢！

Answer 1

您的getTeacherName()方法应选择正确的老师，然后按如下所示返回姓名。

getTeacherName = () => {
    let teacherObj = this.props.teachers.find(teacher => (teacher.id == this.props.match.params.id));
     return teacherObj ? teacherObj.name : null;

  };

Answer 2

map() 方法创建一个新数组，其结果为调用在调用数组中的每个元素上提供了功能。

因此，在您的情况下，您应该使用 find( predicate ) 查找老师，然后找到老师的名字。

Answer 3

您可以使用以下过滤器

 getTeacherName = () => {
    let teacher =  this.props.teachers.filter(teacher => teacher.id == this.props.match.params.id )[0];
   return teacher ? teacher.name : null
  };

映射到props（名称数组）会返回带有逗号（“ Pam ,,,,,,,,,,,,,,,”）的名称-数组中的每一项

3 个答案: