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

Question

我是 React 的新手，我正在尝试显示从 get 中获得的响应数据 request.I 一直在查看多个类似的帖子，试图实现对其他人有效的方法，但对我来说没有任何效果。在我下面的代码中，我没有收到任何错误（设置状态似乎也有效）但没有显示任何内容，我不知道为什么。有任何想法吗？谢谢！

        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

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

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

Answer 2

您的代码存在的问题是您的 setState 从未被调用过。如果您查看 api 调用的最后一个 then 函数，您会发现 return 语句就在 setState 之前（即在 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
                        });
                    })
                }

编辑::好的，尝试像这样

将你的渲染包在方括号中()

               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>);
                }

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

React - Mapping through response data from get request-why response data is not displayed?

setstate

reactjs