React - 组件中的折射器状态

Question

I have this component that populates logo into a grid system. It's getting 2 props which are grid - takes in logos and limit - number of logos shown.

  type Props = {
    grid: [],
    limit: number,
  };

  type State = {
    grid: any,
    queue: any,
  };

  class LogoGrid extends Component<Props, State> {

    state = {
      grid: Object.keys(this.props.grid).map(name => ({name, key: name})).slice(0, this.props.limit),
      queue: Object.keys(this.props.grid).map(name => ({name, key: name})).slice(this.props.limit, Object.keys(this.props.grid).length),
    };

    componentDidMount() {
      this.interval = setInterval(this.updateQueue, SWAP_INTERVAL);
    }

    componentWillUnmount() {
      clearInterval(this.interval);
    }

    getRandomInt = (min: number, max: number) => Math.floor((Math.random() * (max - min)) + min);

    updateQueue = (): void => {
      const { limit } = this.props;
      const grid = [...this.state.grid];
      const queue = [...this.state.queue];
      const replaceIndex = this.getRandomInt(0, limit);
      const removedItem = grid.splice(replaceIndex, 1, queue.shift());
      queue.push(removedItem[0]);

      this.setState({ grid, queue });
    }


    render() {
      const { grid } = this.state;

      return (
        <div className={css.container}>
          {grid.map((item, i) => (          
            <CSSTransitionGroup
              transitionName={css}
              transitionEnterTimeout={SWAP_INTERVAL - 100}
              transitionLeaveTimeout={SWAP_INTERVAL - 100}
            >
              <Logo key={i} name={item.name} color="white" className={css.logo}/>
            </CSSTransitionGroup>
          ))}
        </div>  
      );
    }
  }

  export default LogoGrid;

In the parent component it would be used as below:

  <LogoGrid grid={rawLogos} limit={12} />

rawLogos in this case is just js file of logos like below:

  const url = (filename) => `${process.env.S3_LOGOS_BASE_URL}/logo-${filename}`;

  export default {
    '26grains': url('26grains.svg'),
    ...
    ...
  };

My question is how can I simplify/refractor the LogoGrid component even further especially the way state is written.

UPDATE:

I tried doing this way but getting an error: Uncaught TypeError: Cannot read property 'map' of undefined

  state = {
    grid: this.gridItems,
    queue: this.queueItems,
  };

  gridItems = () => {
    const logoGrid = Object.keys(this.props.grid).map(name => ({name, key: name})).slice(0, this.props.limit);
    this.setState({grid: logoGrid})
  }

  queueItems = () => {
    const queueGrid = Object.keys(this.props.grid).map(name => ({name, key: name})).slice(this.props.limit, Object.keys(this.props.grid).length);
    this.setState({queue: queueGrid})
  }

Answer 1

You can't set the state while initializing it.

You can see an example here: https://codesandbox.io/s/reverent-hill-vvet2

Or here:

const items = ["hi", "test", "3"];

class MyClass extends React.Component {
  state = {
    items: []
  };

  componentDidMount() {
    this.setItems();
  }

  setItems() {
    console.log(this.props.items);
    const items = this.props.items.map(i => <p>{i}</p>);
    console.log(items);
    this.setState({
      items
    });
  }

  render() {
    return <div>{this.state.items}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MyClass items={items} />, rootElement);

Solution:

Set your state AFTER initializing the state with componentDidMount like in the example.