Сопоставление с реквизитами (массив имен) возвращает имя со строкой запятых («Pam ,,,,,,,,,,,,,,,») - по одному для каждого элемента в массиве

Question

Я сопоставляю массив из 20 строк в компоненте React. Массив был передан этому компоненту как подпорка от родителя. Когда я передаю результат функции в элемент JSX (a h1), он возвращает только имя. Когда я передаю ту же функцию заполнителю формы, она возвращает имя, за которым следуют 20 запятых. Если я изменю идентификатор, чтобы функция карты возвращала строку, отличную от середины массива, она возвращает имя с 10 запятыми с каждой стороны. Последний элемент в массиве возвращается с 20 запятыми перед именем.

Я пытался получить функцию, возвращающую ноль или пустую строку, или просто не иметь '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
/>

Вот скриншот того, что я вижу.

Спасибо!

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

Вы можете использовать фильтр, как показано ниже

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

Answer 3

Метод map () создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Так что в вашем случае вы должны использовать find (предикат) , чтобы найти учителя, а затем получить его имя, если найдено.