Javascript 反应-组件中的折射器状态

我有一个组件，它将logo填充到网格系统中。它得到了两个道具，分别是

grid

-接受徽标和

限制

-显示的徽标数量

  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组件，尤其是

状态

的编写方式

更新：

我尝试这样做，但得到一个错误：

uncaughttypeerror:无法读取未定义的属性“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})
  }

---

初始化时无法设置状态

您可以在此处看到一个示例：

或在此：

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

const items=[“hi”，“test”，“3”]；
类MyClass扩展了React.Component{
状态={
项目：[]
};
componentDidMount（）{
这是setItems（）；
}
setItems（）{
console.log（this.props.items）；
const items=this.props.items.map（i=>{i}
）；
控制台日志（项目）；
这是我的国家({
项目
});
}
render（）{
返回{this.state.items}；
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

解决方案：

---

在使用

componentDidMount

初始化状态后设置状态，如示例所示

尝试在

componentDidMount

@GeraltDieSocke中设置两个函数的状态，但仍然得到错误

Uncaught TypeError:无法读取未定义的属性“map”

我认为问题可能是由于此上下文中的关键字

this

造成的。你有没有尝试过使用箭头函数或绑定方法？@GeraltDieSocke，但它们是箭头函数，所以我现在可能知道问题出在哪里了。初始化时无法设置状态。看看这个例子：当我告诉你使用

componentDidMount

时，你到底是怎么做到的？

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

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