首页 文章

如何用键渲染对象？

提问于
浏览 次
0

这是来自名为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？我尝试使用诸如的 Map

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

但它似乎没有用 . 我这样做是因为似乎React无法使用键渲染对象，它告诉我使用数组而不是我尝试过的 .

javascript reactjs onblur

3 回答

  • 1

    您应该在render方法或任何其他方法中执行 map 并在render中调用它，但不能在set状态中调用它 .

    像这样的东西

    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>)
  }
}
    回复于
  • 1

    标记不应该进入状态 .

    你的render（）应该是这样的 .

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

    确保在构造函数中初始化这样的状态 .

    this.state = {
      results : []
    };
    回复于
  • 0
    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

    回复于

相关问题