React -unbale 在子组件中获取 api 调用后加载内容

Question

我主要有 3 个组件- 联系组件 - 它将加载，因为 fetch api 是在 ComponentDidMount 中编写的，我们可以看到数据 - 它显示了用户列表

当您单击特定用户时，它具有 id 作为参数，并将在 handleClick 中调用另一个 api，并成功获得响应并更新状态。理想情况下，当 state 更新时，contact Component render 需要再次渲染，并且我们有 state 中的数据，它会显示子组件，但它没有显示。

我的理解是，每当状态发生变化时组件都会重新渲染，那时我的条件得到满足并会显示子组件。 如有错误请指正

这里是带有代码的编辑器的链接

https://codesandbox.io/s/pensive-microservice-4jem7?fontsize=14

    ```Step1-Click on Contact link```

    ```Step2-ComponentDidMount works and will load content```

    ```Step3-try to click any edit button of any user-HandleClick will work and will fecth data and update state,but its not showing the child component,thats is supposed to render when data is there```

Answer 1

逻辑错误

1. fetchUser 是一个对象，因此条件渲染 fetchUser.length > 0 && <Component /> 不会将任何组件渲染为 (object.length = undefined) > 0 = false。
2. 由于上述原因，您的子组件将没有指向 map() 的数组，因此只需在此处显示对象即可。

可以在CodeSandBox 上查看固定代码。