Reactjs React-获取的数据为'；t显示

有人能告诉我为什么这样不行吗？控制台中显示了正确的数据（console.log（this.state）；），但不会将其传输到MainContainer

在构造函数>状态>用户无问题工作中初始化相同的数据。问题出在哪里

应用程序

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./components/Header/Header”导入标题；
从“/containers/main container/main container”导入主容器；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：[]
}
}
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users')
.then（response=>response.json（））
。然后（用户=>{
设u=users.map（（user）=>{
返回{id:user.id，name:user.name，email:user.email}
})
返回u；
})
.然后（u=>{
this.setState（{users:u}）；
console.log（this.state）；
});
}
render（）{
返回(
)
}
}
导出默认应用程序；

主容器

import React from 'react';
import ActionBar from '../../components/action-bar/ActionBar'
import ListHeader from '../../components/list-header/ListHeader'
import ListItem from '../../components/list-item/ListItem'
import ListItemPlaceholder from '../../components/list-item-placeholder/ListItemPlaceholder'

class MainContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      users : props.users
    }
  }

  render() {
    const list = this.state.users.map(
      (user) =>
       {
        const liStyle = {
          'background-color': user % 2 == 0 ? '#fbfcfc' : 'transparent',
        };
        return <ListItem key={user.id} style={liStyle} id={user.id} name={user.name} email={user.email}/>
      }
      );
    return (
      <div className={'main-container'}>
        <ActionBar />
        <ListHeader />
        {list}
      </div>
    )
  }

}

export default MainContainer;

从“React”导入React；
从“../../components/action bar/ActionBar”导入ActionBar
从“../../components/list header/ListHeader”导入ListHeader
从“../../components/list item/ListItem”导入ListItem
从“../../components/list item placeholder/ListItemPlaceholder”导入ListItemPlaceholder
类MainContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：props.users
}
}
render（）{
const list=this.state.users.map(
（用户）=>
{
常数liStyle={
“背景色”：用户%2==0？“#fbfcfc”：“透明”，
};
返回
}
);
返回(
{list}
)
}
}
导出默认主容器；

致以最良好的祝愿！ crova

在您的

组件中，您将用户以其状态存储在

构造函数中，但您从不更改它。只有当组件在其生命周期内需要对其进行更改时，才需要使用
state
。但是用户通过
users
prop来自它的父级，而你从来不会渲染它。因此，只需渲染该道具即可：

const MainContainer=props=>(
{props.users.map（{id，name，email}）=>(
))}
);

当用户在父级中更改时，它将重新渲染并将新用户数组传递给

另外请注意，如果您的组件仅呈现道具，并且没有自己的状态，则可以将其作为无状态功能组件编写。
数据检索应该在componentWillMount而不是componentDidMount中完成，尽管这不应该是问题所在。你的主容器是什么样子的？数据只是没有显示（可能提示更新问题），还是根本不存在于主容器的道具中？如果您还没有，我建议您使用React-Dev工具来轻松调试状态和道具（这样您就不需要到处放置控制台日志）。我将在minute@GrafWampula实际上，
componentDidMount（）
是获取数据的地方。前缀为从react 16.3开始的
不安全\
，由于经常以非预期方式使用，在未来的react版本中可能会被完全删除。
import React from 'react';
import ActionBar from '../../components/action-bar/ActionBar'
import ListHeader from '../../components/list-header/ListHeader'
import ListItem from '../../components/list-item/ListItem'
import ListItemPlaceholder from '../../components/list-item-placeholder/ListItemPlaceholder'

class MainContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      users : props.users
    }
  }

  render() {
    const list = this.state.users.map(
      (user) =>
       {
        const liStyle = {
          'background-color': user % 2 == 0 ? '#fbfcfc' : 'transparent',
        };
        return <ListItem key={user.id} style={liStyle} id={user.id} name={user.name} email={user.email}/>
      }
      );
    return (
      <div className={'main-container'}>
        <ActionBar />
        <ListHeader />
        {list}
      </div>
    )
  }

}

export default MainContainer;