javascript - 如何根据我获得的 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 recommends that you don't use index as the key 。对于您的情况，如果 category 字符串是唯一的，请改用它们。