javascript - React - 组件中的折射状态

Question

我有一个将 Logo 填充到网格系统中的组件。它获得 2 个属性，分别是 grid - 接受 Logo 和 limit - 显示的 Logo 数量。

  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;

在父组件中，它将按如下方式使用:

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

rawLogos 在这种情况下只是 Logo 的 js 文件，如下所示:

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

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

我的问题是如何进一步简化/重构 LogoGrid 组件，特别是 state 的编写方式。

更新:

我尝试这样做，但收到错误:Uncaught TypeError:无法读取未定义的属性“map”

  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

初始化时无法设置状态。

您可以在此处查看示例:https://codesandbox.io/s/reverent-hill-vvet2

或者在这里:

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);

解决方案:

在使用 componentDidMount 初始化状态后设置您的状态，如示例中所示。