使用reactjs数组中的对象

debugcn 发表于 Dev

安娜·贝尔

我在构建应用程序index.js：1375时收到此错误警告：列表中的每个孩子都应该有一个唯一的“键”道具。在应用程序中（在src / index.js：7处），这是api的响应，我也有此问题，也无法正确地将数组呈现为列表

(15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

这是我的代码

import React, { Component } from 'react'
import ImagesSearch from './ImagesSearch'
import axios from 'axios'

export class Images extends Component {
    constructor(props) {
        super(props);
        this.state = {
          data: [],
          searchquery: '',
        };
        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(e) {
        this.setState({searchquery:e.target.value})
    }

    onSubmit(e) {
        e.preventDefault()
        this.images(this.state.searchquery)
        console.log(this.state.searchquery)
    }

    images(query) {
        return axios.get(`https://api.pexels.com/v1/search? 
            query=${query}+query&per_page=15&page=1`, {
              headers: { Authorization: `` }
            }).then(res => {
               console.log(res.data.photos)
               this.setState(prevState => ({
                   data: [res.data.photos]
               }))
               console.log(this.state.data)
               return res.data
            }).catch(err => {
                console.log(err)
            })
    }

    render() {
        const mapRows = this.state.data.map((item) => (
            <div key={item.id}>
                <li>
                    <span>Name : {item.url}</span>
                    <span>User Type: {item.url}</span>
                 </li>
            </div>))

        return (
            <div>
                <form class="form-group m-2" onSubmit={this.onSubmit}>
                   <label>Search</label>
                   <input class="form-control form-control-sm w-25 mx-auto" name="searchquery" type="text" placeholder="Search" onChange={this.onChange}  />
                   <button type="submit" class="btn btn-primary mt-2">Submit</button>
                </form>
            <div>
            { mapRows }
            <div>
            </div>
        )
    }
}

export default Images

感谢您的帮助

艾伦·海利

您的setState阶段是错的[res.data.photos]。res.data.photos是数组值，但您也可以再次将其设置为数组。因此，状态值将如下所示：

data: [[{...}, {...}, ..., {...}]]

您应该使用res.data.photos而不是[res.data.photos]。

images(query) {
    ...
           this.setState(prevState => ({
               data: res.data.photos  // your code was [res.data.photos]
           }))
    ...
}

另外，如果ID重复index，id则可以使用代替。请尝试以下操作以避免Warning。

const mapRows = this.state.data.map((item, index) => (
  <div key={index}>
    <li>
        <span>Name : {item.url}</span>
        <span>User Type: {item.url}</span>
     </li>
  </div>
));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。