javascript - 将数组中的 API 链接映射为 React 类组件的状态/ Prop

Question

因此，我有一个类组件可以显示来自数据的 API。链接作为 Prop 从数组中插入，一切正常:

let urls = [
    'http://localhost:3005/products/774944', 
    'http://localhost:3005/products/774945', 
    'http://localhost:3005/products/774946',
    'http://localhost:3005/products/123581', 
    'http://localhost:3005/products/782691', 
    'http://localhost:3005/products/782485',
    'http://localhost:3005/products/782486', 
    'http://localhost:3005/products/782487', 
    'http://localhost:3005/products/782488',
    'http://localhost:3005/products/738471'];

class Item extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: {},
    url: ulrs[0]
}
}
componentDidMount() {
    fetch(this.state.url)
      .then(response => response.json())
      .then(data => this.setState({ output: data }));
  }
render() {
    console.log(this.state.output);
    const { general = {name:"", description:""} } = this.state.output;
    const { brand = {name : ""} } = this.state.output;
    const { id } = this.state.output;
    const {images = {primary:{large:""}}} = this.state.output;
  return (
    [<ItemPanel>
    <ItemBox>
    <BoxTitle>{general.name}</BoxTitle>
    <BoxId>Item ID: {id}</BoxId>
    <Details onClick={show_details}>Show more...</Details>
        <Inline>
        <Quantity type="number" defaultValue="1"></Quantity>
        <Icon>add_shopping_cart</Icon>
        </Inline>
        <AddItem>
        <Sfont>Add to cart</Sfont>
    </AddItem>
    </ItemBox>
        <BoxImg src={images.primary.large} alt='img error'></BoxImg>
</ItemPanel>, 
<DetailsView id="details_view">
<ItemDetails id='details_id'>
<Close onClick={show_details}>x</Close>
  <BoxTitle>{general.name}</BoxTitle>
  <BigImg src={images.primary.large} alt='img error'></BigImg>
  <BoxId>Item ID: {id}</BoxId>
  <Brand>Made by: {brand.name}</Brand>
  {Parser(general.description)}
  <Inline>
        <Quantity type="number" defaultValue="1"></Quantity>
        <Icon>add_shopping_cart</Icon>
        </Inline>
        <AddItem>
        <Sfont>Add to cart</Sfont>
    </AddItem>

   </ItemDetails>
   </DetailsView>
    ]);}}

我想做的是某种功能，它基于一个模板创建多个组件，但使用来自 API 的不同数据。我正在尝试这样的事情:

let Show_items = React.createClass({
render: function() {
    let urls = [
    'http://localhost:3005/products/774944', 
    'http://localhost:3005/products/774945', 
    'http://localhost:3005/products/774946',
    'http://localhost:3005/products/123581', 
    'http://localhost:3005/products/782691', 
    'http://localhost:3005/products/782485',
    'http://localhost:3005/products/782486', 
    'http://localhost:3005/products/782487', 
    'http://localhost:3005/products/782488',
    'http://localhost:3005/products/738471'];
    let ItemsReady = urls.map(function(link, index){
                    return {Item(link)};
                })

    return  ItemsReady;
}});

我的目标是将 ItemsReady 导出到 index.js 并将其渲染到 DOM 以在我的应用程序中显示多个组件。不幸的是，我还没有弄明白，所以非常感谢您的帮助

Answer 1

你可以从父组件中获取这个 urls 数组作为 prop，并映射到父组件中的数组上。示例:假设您有一个父组件 App，其中包含此 url 数组，现在你必须在它上面映射并调用你的子组件，即:每次迭代时的项目。

//in your parent component
urls.map((url,index)=>{
return(
  <Item key={index} url={url}/>
)
})
// now child component i.e: Item
//all code will be same just take the url from props instead of state while fetching
componentDidMount() {
fetch(this.props.url)
  .then(response => response.json())
  .then(data => this.setState({ output: data }));
}