В ответ Как я могу получить данные и визуализировать один объект в массиве состояний, не отображая все это? - PullRequest
Новая
       6

В ответ Как я могу получить данные и визуализировать один объект в массиве состояний, не отображая все это?

1 голос
/ 22 октября 2019

У меня есть простой вызов извлечения, который отображает данные из состояния, передаваемого в состояние посредством извлечения. Я хотел бы взять только определенный объект из массива элементов. По индексу я полагаю. И отобразить его содержимое. В принципе, я не хочу зацикливать все данные. Вместо этого я хотел бы контролировать, когда эти данные отображаются. как items[0].name и items[0].email или что-то в этом роде.

Вот мой код и ссылка на codesandbox для простоты помощи 

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false
    };
  }
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
  }
  render() {
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <ul>
            {items.map(item => (
              <li key={item.id}>
                Name: {item.name} | Email: {item.email}
              </li>
            ))}
          </ul>
        </div>
      );
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1 Ответ

1 голос
/ 22 октября 2019

Вы можете выбрать значение из массива, используя index, а затем отобразить свойства, которые вы хотите отобразить в пользовательском интерфейсе,

Здесь у меня есть свойство в состоянии с именем index, которое имеет значение по умолчанию 0, теперь на основе index мы выбираем элемент из массива items и отображаем его значение 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
      index: 0
    };
    this.handleIndex = this.handleIndex.bind(this)
  }
  
  handleIndex(event){
    this.setState({index: event.target.value})
  }
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
  }
  render() {
    var { isLoaded, items, index } = this.state;
    const selected = items [index] || items[0]
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <ul>
             <li key={selected.id}>
                Name: {selected.name} | Email: {selected.email}
              </li>
          </ul>
          <input type='number' onChange={(e)=>this.handleIndex(e)} placeholder='Enter a valid index'/>
        </div>
      );
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
  <div id='root'/>
</body>

Если вам нужно найти index на основе определенного условия, тогда вам нужно использовать findIndex или также вы можете использовать find дляполучить требуемый элемент из массива и затем отобразить значения, in case of multiple element can fulfill the condition then you can filter the values first and then map` поверх них

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...