reactjs - React -ComponentDidMount 工作，但再次点击每个响应给出错误

Question

**看到我的代码在页面加载时我有 3 个链接，一个是联系链接，当我点击联系链接时，有一个 componentDidMount 并且它调用用户 api，我成功获得响应并保存到状态，我尝试渲染我的子组件中名为 GetDetailsOfContact 的响应中的名称和名称一起，它确实有一个按钮来获取每个用户的详细信息。当您单击名称附近的按钮时，它带有 id 并具有具有 api 的功能来获取具有该 id 的用户的详细信息，它也可以正常工作。我确实有另一个名为 GetDetailsContentSection 的子组件，它再次将道具作为我从带有 id 的 fetch api 获得的响应，但我无法渲染，它给出以下错误**

请找到我的 App.js

import React from "react"
import ListTodos from "./ListTodos"
import {Route,Link,BrowserRouter as Router} from "react-router-dom"
import Contact from "./Contact"
import Profile from "./Profile"
import Home from "./Home"

class App extends React.Component {

    render(){
        return(
            <div>
            <Router>
            <Link to="/home">Home</Link>
            <Link to="/contact">Contacts</Link>
            <Link to="/profile">My Profile</Link>
            <Route path="/home" component={Home} />
            <Route path="/contact" component={Contact} />
            <Route path="/profile" component={Profile} />
            </Router>


            </div>
        )
    }
}
export default App```
        And i have Contact Component



    import React from "react"
    import GetDetailsOfContact from "./GetDetailsOfContact"
    import GetDetailsContentSection from "./GetDetailsContentSection"

    class Contact extends React.Component {
        constructor(props){
            super(props)
            this.state={
                data:[],
                fetchUser:[]
            }
            this.handleChange = this.handleChange.bind(this)
        }

        handleChange(id){
            console.log(id);
             fetch('https://jsonplaceholder.typicode.com/users/'+id)
          .then(response => response.json())
          .then(data => this.setState({ fetchUser:data }));
        }
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
          .then(response => response.json())
          .then(data => this.setState({ data:data,fetchUser:[] }));
      }
        render(){
            return(
                <div>
                <p>This is my contact page</p>
                <GetDetailsOfContact data={this.state.data}  handleChange={this.handleChange}
                 />
                 <GetDetailsContentSection data={this.state.fetchUser} />
                </div>


            )
        }
    }

    export default Contact
--------------------------------------------------------------------------------------------------------

    import React from "react"

    class GetDetailsOfContact extends React.Component {
        render(){
            return(
                <div>
                <ul>
                {
                    this.props.data.map(item=>{
                        return(<li key={item.id}>{item.name}
                        <button onClick={()=>this.props.handleChange(item.id)}>edit</button></li>)
                    })
                }
                </ul>

                </div>
            )
        }
    }
    export default GetDetailsOfContact
--------------------------------------------------------------------------------------------------------


    import React from "react"

    class GetDetailsContentSection extends React.Component {
        render(){
            return(
                <div>
                <p>This is the details of particular contact selected</p>
                <ul>
                {
                    this.props.data.map(item=>{
                        return(<li key={item.id}>{item.name}</li>)
                    })
                }
                </ul>
                <div>

                </div>

                </div>
            )
        }
    }
    export default GetDetailsContentSection



        But am getting this error 
 `The above error occurred in the <GetDetailsOfContact> component: in GetDetailsOfContact (created by Contact)
             in div (created by Contact) in Contact in Route (created by App) in Router (created by BrowserRouter) in BrowserRouter
             (created by App) in div (created by App) in App Consider adding an error boundary to your tree to customize error handling behavior`   

标签： reactjs

Answer 1

存在逻辑错误

    The fetchUser is an object so the conditional rendering fetchUser.length > 0 && <Component /> will not do any component render as (object.length = undefined) > 0 = false.
    Due to the above your child component will not have an array to map() so just show the object there.