Как сделать объект с ключами? - PullRequest
Новая
       19

Как сделать объект с ключами?

0 голосов
/ 10 декабря 2018

Это пример кода от пользователя с именем FrankerZ: 

class ExampleComponent extends React.Component {
    onBlur = async () => {
        const results = await axios.get('myhttpendpoint');

        this.setState({
            results
        });
    }
    render() {
        return (
            <div>
                <form>
                    <span className="name"> Search Term: </span>
                    <input id="search-term" value={this.state.value} onBlur={this.onBlur} />
                </form>
                <div id="results">
                    {this.state.results}
                </div>
            </div>)
    }
}

Но, по сути, мой вопрос в том, что если мой axios.get вернул объект с ключами, такими как

[{name:test1, data: datadatadata}, {name: test2, data: datatatatatata}]

Как мне отобразить каждый объект в его собственном span или своем div?Я пытался использовать карту типа 

this.setState(results.map((item, index) => (<li key = {index}>{item.name}</li>)));

, но она не работает.Я сделал это, потому что кажется, что React не может визуализировать объект с ключами, и он сказал мне использовать вместо этого массив, что я и пытался.

Ответы [ 3 ]

0 голосов
/ 10 декабря 2018 
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    frank: [] // Basically, you will have a place in the state where you will save your data, which is empty.
  }

  componentDidMount(){
    // This lifecycle method is used to fire requests.
    // Fire your request.
    // get the response.
    // save the data only in the state, don't save ELEMENTS such like li.
    const _result = [
      { id: 1, name: 'Frank1' },
      { id: 2, name: 'Frank2' }
    ];
    this.setState({
      frank: _result
    });
  }

  render() {
    const { frank } = this.state;

    return (
      <div>
        <form>
          <span className="name"> Search Term: </span>
          <input id="search-term" value={this.state.value} onBlur={this.onBlur} />
        </form>
        <div id="results">
         {/*HERE DO MAPPING*/}
         {
            frank.map((item, index) => <li key={index}>{item.name}</li>)
          }
        </div>
      </div>)
  }
}


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

Следуйте за комментариями там.живое демо: https://codesandbox.io/s/kxv6myl8wo

0 голосов
/ 10 декабря 2018

Разметка не должна входить в состояние.

Ваш рендер () должен быть таким. 

<div id="results">
  <ul>
    {
      this.state.results.map((item, index) => <li key = {index}>{item.name}</li>)
    }
  </ul>
</div>

убедитесь, что вы инициализируете такое состояние в конструкторе. 

this.state = {
      results : []
    };
0 голосов
/ 10 декабря 2018

Вы должны сделать map в методе рендеринга или любом другом методе и вызвать его в режиме рендеринга, но не в установленном состоянии.

Что-то вроде этого 

class ExampleComponent extends React.Component {
  onBlur = async () => {
    const results = await axios.get('myhttpendpoint');

    this.setState({
      results
    });
  }
  render() {
    return (
      <div>
        <form>
          <span className="name"> Search Term: </span>
          <input id="search-term" value={this.state.value} onBlur={this.onBlur} />
        </form>
        <div id="results">
          {this.state.results.map(item => (<li key={item.name}>{item.name}</li>))}
        </div>
      </div>)
  }
}
...