Question

这真让我发疯！我已经尝试了所有这些技巧，使用生命周期方法来比较道具数据和组件中行数据的当前状态，从而呈现这些数据，但是似乎带有行道具的React Grid可能没有更新，因为我可以看到控制台在我的控制台中记录数据行。它有数据，但是在我的表中显示“无数据”，这意味着当我渲染的表必须是“无数据”时。现在，如果我对组件进行简单的更改，请单击“保存”，对其进行更新，然后在表中看到3个条目。奇怪的是，阵列中的控制台现在有6个条目。

export default class Demo extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            columns: [
                { name: 'teamName', title: 'Team' },
                { name: 'profilePic', title: 'Avatar' },
                { name: 'score', title: 'Score' },
                { name: 'profileName', title: 'profileName' },
                { name: '', title: 'Rank' }
            ],
            rows: [],
            pageSizes: [5, 10, 15],
            currentPage: 0,
            loading: true,
            counter: 0
        };
    }

    componentWillMount() {
        this.getRows();
    }
    componentDidMount() {
        this.getRows();
    }

    getRows = () => {
        this.setState({
            rows: this.props.league
        });
    };

    //   static getDerivedStateFromProps(props, state) {
    //     if (props.league.length !== state.rows.length) {
    //       return {
    //         rows: props.league
    //       };
    //     }
    //     return null;
    //   }


    // componentDidMount() {
    //     console.log("NP1::",this.props.league)
    //     this.setState({rows: this.props.league})
    //   }

    //   componentDidUpdate(nextProps, prevState) {
    //     if(nextProps.league!==prevState.rows){
    //       //Perform some operation here
    //       console.log("NP2::",this.props.league)
    //       this.setState({rows: this.props.league});
    //       this.classMethod();
    //   }
    // }


    // static getDerivedStateFromProps(nextProps, prevState){
    //     if(nextProps.league!==prevState.rows){
    //         console.log("NP::",nextProps.league)
    //         return{
    //             rows: nextProps.league
    //         }

    //       return 
    //    }
    //    else return null;
    //  }

    //  componentDidUpdate(nextProps, prevState) {
    //     if(nextProps.league!==prevState.rows){
    //       //Perform some operation here
    //       console.log("NP2::",this.props.league)
    //       this.setState({rows: this.props.league});
    //       this.classMethod();
    //     }
    // }

    // componentWillReceiveProps(nextProps) {
    //     console.log("NP::",nextProps.league+"----"+this.props.league);
    //     if (nextProps.league !== this.props.league) {
    //         console.log("NP2::",nextProps.league)
    //         this.setState({rows: nextProps.league})
    //     }
    // }

    // componentWillUpdate(nextProps, nextState) {
    //     console.log("NP::", nextProps.league + "----" + this.state.rows);
    //     if (nextProps.league !== this.state.rows) {
    //         this.setState({ rows: nextProps.league })
    //     }
    // }

    render() {
        const { rows, columns } = this.state;
        console.log("STATEDATA::", this.state)
        return (
            <Paper>
                <Grid
                    rows={rows}
                    columns={columns}

                >
                    <RowDetailState />
                    <Table
                        cellComponent={Cell}
                    />
                    <TableHeaderRow />
                    <TableRowDetail
                        contentComponent={RowDetail}
                    />
                </Grid>
                {/* <PagingPanel /> */}
            </Paper>
        );
    }
}

我已经离开了注释代码，因此您可以看到我玩过的LF方法。这是没有数据的第一个渲染的样子，并且我的状态数据的控制台日志包括行。

我的行的初始状态为[]，因此我们知道发生了setState。为什么不触发此组件中的渲染。我在Ag Grid上看到了一些与此相关的帖子，但是React网格并使其正确渲染是否存在任何已知问题？

如前所述，在Vs代码中，如果我只是执行换行（或进行任何更改）并保存。组件更新。我将在控制台数组中有3个条目render和6个条目，如此处所示。

添加此内容，以便您可以同时看到一个联盟的道具。

这是父组件

class LeaguePage extends Component {
    static propTypes = {
        loadLeague: PropTypes.func.isRequired,    
      }
      constructor(props) {
        super(props)
        this.state = {
        };
    }

    componentWillMount() {
        this.props.loadLeague();
      }

    render() {
        console.log("LEAGUEPROPS::",this.props);
        return (
            <div className="g-row">
                <div className="g-col">
                <h1>LeaguePage</h1>
                {/* <LeagueTable {...this.props} /> */}
                <br />
                <br />
                <RgDetail {...this.props} rows={this.state.rows}  />
                <br />
                <br />
                {/* <RgTable /> */}
                <br />
                <br />
                <br />
            </div>
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    console.log("MYSTATE::",state)
    return {
        league: LeagueSelector(state),
    }
  }


const mapDispatchToProps = Object.assign(
    {},
    leagueActions
  );

  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LeaguePage));

联盟的选择者

import { createSelector } from 'reselect';
import _ from 'lodash';

var data = [];

export function getLeague(state) {
  if (state.league) {
    return state.league;
  }
}

function transform(UserRecord) {
  const outerObj = UserRecord[Object.keys(UserRecord)[0]];
  data.push(outerObj);
  return data
}

export function getSortedLeague(state) {
  if (state.length > 1) {
    state.map(x => transform(x));
    return data;
  }
  else
    return data;
}

//=====================================
//  MEMOIZED SELECTORS
//-------------------------------------

export const LeagueSelector = createSelector(
  getLeague,
  getSortedLeague
);

Answer 1

因此，这是一个很难学到的教训。我一直在返回的所有时间里，可能在我的reducer中负载（而不是用新状态替换状态），然后在选择器中（如上所示），我从中推导出了新的状态。错误的模式或练习，我想你可以说。我迷失了自己，尝试着使用选择器。

我的旧减速器看起来像

const user = [{
    UID: {
      Key: {
      profileName: '',
      profilePic: '',
      score: 0,
      teamKeysTier1: '',
      teamKeysTier2: '',
      teamName: '',
      uid: ''
    }
    }
  }];  

export function leagueReducer(state = user, {payload, type}) {
    switch (type) {
        case LOAD_LEAGUE_SUCCESS:
        console.log("REDPAYLOAD::",payload)
        return payload;

        default:
            return state;
    }

}

我基本上忘记了reducer的基本原理，您应该在其中创建新的状态位，对商店进行更新，这反过来会告诉所连接的组件您有新数据。我认为这种“连接”接线无法正常工作，因为我没有在减速器中创建/更换。因此，我基本上将选择器中已做的所有事情（如上所示），将其移到我的减速器中，然后使用Object.Assign创建一个新的状态块（我知道这有点简洁，但现在我可以了简洁）

这是我现在的新减速器。

import { LOAD_LEAGUE_SUCCESS } from '../actions/actionTypes';

const user = [{
      profileName: 'FEKing',
      profilePic: '',
      score: 100,
      teamKeysTier1: '',
      teamKeysTier2: '',
      teamName: 'TheCreator',
      uid: ''
  }];  

export function leagueReducer(state = user, {payload, type}) {
    switch (type) {
        case LOAD_LEAGUE_SUCCESS:
        payload.map(x => {
        const outObj = x[Object.keys(x)[0]];
        state.push(outObj);
        })
        console.log("user::",state)
        return Object.assign([], state);

        default:
            return state;
    }

}

现在我的连接组件已更新，并且我的数据已加载到表中。基本上是因为Object.assign([], state)：）

反应网格-setState不触发网格中的渲染

1 个答案: