Как я могу создать список элементов из данных API, которые я получаю?

Question

Я пытаюсь создать список подкатегорий, которые я получаю из API, и отобразить их в приложении.Проблема в том, что я не знаю, как преобразовать элементы из массива (API) в элементы списка.

componentDidMount(){
      axios.get('/categories/' + this.props.match.params.id)
          .then(response => {
              console.log(response.data.children) //Array of strings

          }) 
  }

 render(){

      return(
          <div className={classes.Showcategory}>
              <h1>{this.props.match.params.id}</h1>
              <li>Here I need for each string of the array a list item<li/>
          </div>
      );
  }

Answer 1

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

Попробуйте:

constructor(props) {
  super(props);

  this.state = {
    categories: []
  };
}

componentDidMount() {
  axios.get("/categories/" + this.props.match.params.id).then(response => {
    console.log(response.data.children); //Array of strings
    this.setState({ categories: response.data.children });
  });
}

render() {
  return (
    <div className={classes.Showcategory}>
      <h1>{this.props.match.params.id}</h1>
      {this.state.categories.map((category, index) => (
        <li key={index}>{category}</li>
      ))}
    </div>
  );
}

Обратите внимание, что React рекомендует не использовать index как key.В вашем случае, если category строки уникальны, используйте их.