Question

我正在尝试创建从API获取的子类别列表，并将其显示在App中。问题是我不知道如何将数组（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字符串是唯一的，请改用它们。

如何从获得的API数据创建项目列表？

1 个答案: