ReactJS пытается вызвать метод класса из кнопки, которая динамически отображается

Я пытаюсь вызвать метод deletePost (index), который находится в классе ShowPost, из кнопки, которая динамически отображается на этапе render () в React. Кнопка с надписью «щелкни меня» может быть вызвана и будет печатать первую позицию (также известную как [0]) моего массива this.state.posts, в то время как кнопки с надписью «Удалить», которые были динамически создал код взлома. Это дает мне TypeError: невозможно прочитать свойство deletePost из undefined. Я думаю, что мне нужно каким-то образом «передать» метод deletePost моим «внутренним» компонентам (также известным как кнопки), которые визуализируются динамически?

class ShowPost extends Component {

  constructor(props) {
      super(props);
      this.state = {
        posts: []
      };
      this.setState = this.setState.bind(this);
      this.deletePost = this.deletePost.bind(this);
    }

  deletePost(index){
    console.info(this.state.posts[index]);
  }

  render(){
    return (
      <React.Fragment>
        <button onClick = {this.deletePost.bind(this, 0)} > click me </button>
          <div className = "list-group">
          {
            this.state.posts.reverse().map(function(post,index) {
              return <div key = {index} className = "list-group-item active">
              <h4 className = "list-group-item-heading">{post.Title}</h4>
              <p className = "list-group-item-text">{post.Subject}</p>
              <button onClick = {this.deletePost.bind(this, 0)} > Delete </button>
              </div>
            })
          }
          </div>
      </React.Fragment>
    )
  }
}

export default ShowPost;

используйте функцию arrow вместо нормальной функции для вашего map, например this.state.posts.reverse().map((post,index) => {

— 28.11.2018 10:02

Благодарность! это помогло. когда лучше использовать функцию () вместо стрелок? пока кажется, что стрелочная функция в целом лучше

— 28.11.2018 10:04

javascript reactjs

28.11.2018 09:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Поскольку кнопка рендеринга является функцией, вы не можете получить this. Измените на функцию стрелки.

this.state.posts.reverse().map(post => (
          return <div key = {post.Id} className = "list-group-item active">
          <h4 className = "list-group-item-heading">{post.Title}</h4>
          <p className = "list-group-item-text">{post.Subject}</p>
          <button onClick = {this.deletePost.bind(this, 0)} > Delete </button>
          </div>
        ))

Другое дело, что вы должны использовать post.id в качестве ключа, а не индекса.

28.11.2018 10:06