Question

谁能告诉我为什么那不起作用？正确的数据显示在控制台中（console.log（this.state）;），但不会转移到MainContainer。

在构造函数＆gt; state＆gt;用户中正常工作的相同数据没有问题。问题出在哪里？

应用

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;

mainContainer上

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;

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

最诚挚的问候！ crova

Answer 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>。

另请注意，如果您的组件只渲染道具并且没有自己的状态，则可以将其编写为无状态功能组件。

不显示React - 获取的数据

1 个答案: