Question

我是新的反应，我正在尝试显示我从get请求获得的响应数据。我一直在查看多个类似的帖子，试图实现对其他人有用的东西，但对我来说没有任何作用。在我的下面的代码中，我没有得到任何错误（设置状态似乎也工作）但没有显示任何东西，我不知道为什么。有任何想法吗？谢谢！

        class Testing extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    name: []
                };
                this.getData = this.getData.bind(this)
            }
            componentDidMount() {
                this.getData();
            }
            getData() {
                axios.get('https://example.com)
                    .then(results => {
                        return results.data;
                    })
                    .then(res => {
                        let arr = res.items;
                        let test = [];
                        return arr.map(function(item) {
                            test.push(item);
                        })
                        this.setState({
                            name: test
                        });
                    })
                }

                render() {
                    const persons = this.state.name.map((item, i) => {
                        return 
                           <div>
                              <h1> {item.name} </h1> 
                           </div>
                    });

                    return 
                    <div id = "layout-content" className = "layout-content-wrapper" >
                        <div className = "panel-list"> 
                            All: {persons} 
                        </div> 
                    </div>
                }
            }

更改渲染：

 class Testing extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    name: []
                };
                this.getData = this.getData.bind(this)
            }
            componentDidMount() {
                axios.get('https://example.com)
                    .then(results => {
                        return results.data;
                    })
                    .then(res => {
                        let arr = res.items;
                        let test = [];
                        return arr.map(function(item) {
                            test.push(item);
                        })
                        this.setState({
                            name: test
                        });

                    })
                }


                render() {
                    <div>
                       this.state.name ? this.state.name.map((item, i) => {
                           return (
                              <div>
                                <h1>{ item.name }</h1>
                              </div>
                           )
                       }) : null;
                    </div>

                }
            }

错误：

<div>
  this.state.name ? this.state.name.map((item, i) => {
   return (
        ^
        <div>
          <h1>{ item.name }</h1>
         </div>

Answer 1

您的代码存在的问题是您的setState永远不会被调用。如果查看api调用的最后一个函数，则在setState之前有一个return语句（即在arr.map中）。因此，您的代码永远不会到达setState。删除return语句，它应该工作：

             getData() {
                axios.get('https://example.com)
                    .then(results => {
                        return results.data;
                    })
                    .then(res => {
                        let arr = res.items;
                        let test = [];
                        arr.map(function(item) {
                            test.push(item);
                        })
                        this.setState({
                            name: test
                        });
                    })
                }

编辑:: Ok尝试将您的渲染包装在方括号()中，如下所示

               render() {
                    const persons = this.state.name.map((item, i) => {
                        return 
                           (<div>
                              <h1> {item.name} </h1> 
                           </div>);
                    });

                    return 
                     (<div id = "layout-content" className = "layout-content-wrapper" >
                        <div className = "panel-list"> 
                            All: {persons} 
                        </div> 
                    </div>);
                }

Answer 2

首先，将您的getData函数甚至整个请求逻辑移动到componentWillMount函数中。其次，将您的render功能更改为：

render() {
   return (
   <div>
      this.state.name ? this.state.name.map((item, i) => {
          return (
             <div>
               <h1>{ item.name }</h1>
             </div>
          )
      }) : null;
   </div>
   )
}

React - 通过get请求的响应数据进行映射 - 为什么不显示响应数据？

2 个答案: