Оптимизация запросов / ответов в реагировать / nodejs

Question

, поэтому у меня проблема с оптимизацией кода, в соответствии с правилом DRY.

У меня 2 запроса, 2 ответа, 2 GETS, 2 POSTS,

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

Вот мой выбор из Axios:

componentDidMount() {

    fetch('http://localhost:3001/getcounterEbook1')
    .then(response => {
      console.log(response);
      return response.json();
    })
    .then(count => {
      console.log(count);
      console.log(count.count);
      this.setState({counterebook1: count.count});
    }).catch(err => {
    });

    fetch('http://localhost:3001/getcounterEbook2')
    .then(response => {
      console.log(response);
      return response.json();
    })
    .then(count => {
      console.log(count);
      console.log(count.count);
      this.setState({counterebook2: count.count});
    }).catch(err => {
    });
  }

Вот функция handleClick1,2:

  handleClick1(e) {
      console.log("Sending ...")
      let data = {
          clicked: true,
      }
        axios.post('http://localhost:3001/counterEbook1', data)
        .then( res => {
            console.log('ok')
        })
        .catch( () => {
            console.log('Message not sent')
        })
    }


  handleClick2(e) {
    console.log("Sending ...")
    let data = {
        clicked: true,
    }
      axios.post('http://localhost:3001/counterEbook2', data)
      .then( res => {
          console.log('ok')
      })
      .catch( () => {
          console.log('Message not sent')
      })
  }

Как я могу преобразовать его в цикл?

Answer 1

Одна из возможностей - использовать объект, назвать его myObject и использовать map, например, так:

const myObject = { 
  'counterebook1' : 'http://localhost:3001/getcounterEbook1', 
  'counterebook2' : 'http://localhost:3001/getcounterEbook2', 
};

class Foo extends Component {

  ....

  for (let [key, url] of Object.entries(myObject)) {
    fetch(url)
      .then(response => {
        console.log(response);
        return response.json();
      })
      .then(count => {
        console.log(count);
        console.log(count.count);
        this.setState({key: count.count});
      }).catch(err => {
      });
  }
...

Вы можете объединить handleClick s, сначала получив источник, вызвавший событиеи затем используя тот же объект

  handleClick = (e) => {
    console.log("Sending ...")
        const url = myObject[e.target.id];
    let data = {
        clicked: true,
    }
      axios.post(url, data)
      .then( res => {
          console.log('ok')
      })
      .catch( () => {
          console.log('Message not sent')
      })
  }

Обратите внимание, что мы вытягиваем id prop from e.target and referencing the key/value pair in myObject . This means that the element rendered must have the id` prop, установленный в какой-то ключ в myObject:

Например:

  <button onClick={this.handleClick} id={key}>
      `Button for ${key}`
  </button>

Надеюсь, эта помощь!