从axios API检索到react javascript中JSON中的surf对象数组

Question

我在react中调用了Axios示例API，我希望在输出中只呈现数组中的特定字段，例如第一人称公司名称。例如"person.cpmpany.name“我希望有”“Romaguera Crona”“，但我弄错了。

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "address": {
      "street": "Kulas Light",
      "zipcode": "92998-3874",
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "address": {
      "street": "Victor Plains",
      "zipcode": "92998-3874",
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
    }
  },...]

我的react组件是：

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


export default class PersonList extends React.Component {
    state = {
        persons: []
    };

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const persons = res.data;
                // const persons2 = JSON.parse(persons);
                this.setState({ persons : persons});
            })
    }

    render() {
        return (
            <ul>
                { this.state.persons.map(person => <li>{person.phone}</li>)}
                { this.state.persons.map(person => <li>{person.address.street}</li>)}
              // { this.state.persons.map(person => <li>{person[0].cpmpany.name}</li>)} // here is the issue

            })
            </ul>
        )
    }
}

​

我想渲染JSON文件中的特定组件，或在可能的JSON对象中的特定单元格上循环。例如，只呈现person.cpmpany.name的for循环

Answer 1

{person[0].cpmpany.name}中有一个打字错误。此外，由于您已经在this.state.persons数组上进行了映射，因此可以简单地使用{person.company.name}。

请尝试用{person.company.name}替换{person[0].cpmpany.name}