React - 不显示获取的数据答案

【问题标题】：React - fetched data isn't displayedReact - 不显示获取的数据
【发布时间】：2018-04-11 22:48:05
【问题描述】：

谁能告诉我为什么这不起作用？控制台中显示了正确的数据 (console.log(this.state);)，但不会传输到 MainContainer。

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

应用程序

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Header from './components/header/Header';
import MainContainer from './containers/main-container/MainContainer';

class App extends Component {

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


  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(users => {
        let u = users.map((user) => {
         return {id: user.id, name: user.name, email: user.email}
        })
        return u;
      })
      .then(u => {
        this.setState({users: u});
        console.log(this.state);
      });
  }


  render() {
    return (
      <div className="App">
        <Header/>
        <MainContainer users={this.state.users}/>
      </div>
    )
  }
}

export default App;

主容器

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;

.................................................. ..................................................... ......

最好的问候！克罗瓦

【问题讨论】：

数据检索应该在componentWillMount而不是componentDidMount中完成，虽然这不应该是问题。您的 MainContainer 是什么样的？数据只是不显示（可能暗示更新问题）还是 MainContainer 的道具中根本不存在？如果你还没有，我建议使用 React Dev Tools 来轻松调试状态和道具（这样你就不需要把控制台日志放在任何地方）。
componentWillMount 不能解决问题。我会在一分钟内添加 MainContainer 列表
@GrafWampula 实际上componentDidMount() 是获取数据的地方as also suggested by the react docs。 componentWillMount() 以 UNSAFE_ 为前缀，从 react 16.3 开始，由于经常以非预期方式使用，可能会在未来的 react 版本中完全删除。

标签： reactjs fetch

【解决方案1】：

在您的<MainContainer> 组件中，您将用户的状态存储在constructor 中，但您永远不会更改它。仅当组件在其生命周期内需要对其进行更改时，您才需要使用state。但是用户通过您从未渲染的 users 道具来自它的父级。所以只需渲染那个道具：

const MainContainer = props => (
    <div className="main-container">
          <ActionBar />
          <ListHeader />
          {props.users.map(({id, name, email}) => (
              <ListItem 
                  key={id} 
                  style={{
                    backgroundColor: id % 2 === 0 ? '#fbfcfc' : 'transparent'
                  }} 
                  id={id} 
                  name={name} 
                  email={email}
              />
          ))}
    </div>  
);

当父级中的用户发生变化时，它将重新渲染并将新的用户数组传递给<MainContainer>。

还要注意，如果你的组件只渲染 props 而没有自己的状态，它可以写成一个无状态的函数式组件。

【讨论】：