1

编辑：经过进一步测试，我意识到 componentDidMount 的行为符合我的预期，但这似乎是我的随机函数的一个问题，如果它再次运行，由于某种原因返回未定义，所以在初始安装时它会给我结果，当我再次安装它时，它返回未定义，因此没有任何渲染......

我进行了研究以了解为什么我会遇到这个问题。我有一个 webapp 组件，它只是一个将呈现赞助商名称的横幅。每次渲染此横幅时，我都想随机化赞助商出现的顺序。我可以让它工作，但它只在第一次渲染时发生（在 componentDidMount() 上），然后每次我访问该组件被渲染的任何部分时，它不再调用 componentDidMount()，因此它不渲染任何内容。

起初我认为 componentDidMount() 应该在每次进入调用该组件的部分时调用。阅读后，到处都说组件被安装一次，这就是为什么它只调用一次函数。我怎样才能让它在每次渲染组件时随机化？

这是我正在编写的代码示例。

class SponsorBanner extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            randomized: []
        }

        this.randomizeSponsors = this.randomizeSponsors.bind(this)
    }

    randomizeSponsors(){
        let copy = []
        const array = ['a','b','c','d']
        let n = array.length
        let i;

        while(n){
            i = Math.floor(Math.random() * n--)
            copy.push(array.splice(i,1)[0])
        }

        let randomizedArray = copy.map((sponsor,i) => <div key={i}>{sponsor}</div>)

        this.setState({randomized:randomizedArray})

    }
    componentDidMount(){
        this.randomizeSponsors()
    }


    render(){

        return (
            <div>
                {this.state.randomized}
            </div>
        )
    }
}

该组件在应用程序的 2 个不同部分中呈现。这是一个非常简单的应用程序，我什至没有向它添加路由。它只是完全作为一个 SPA 工作。当用户单击一个部分时，它会呈现该组件。在第一次加载时，如果我访问呈现此组件的部分，它会显示一个随机数组。如果我导航到另一个部分并返回，它会呈现一个空横幅。

为什么会发生这种情况，我该如何解决？

4

2 回答 2

2

另一种方法可能是使用 asetIterval如果您希望它改变每 x 数量的milliseconds.

工作示例：https ://codesandbox.io/s/k9zz9wq9lo

import random from "lodash/random";
import React, { Component } from "react";

export default class Banner extends Component {
  state = {
    randomIndex: 0
  };

  componentDidMount = () => this.setTimer();

  componentWillUnmount = () => this.clearTimer();

  clearTimer = () => clearInterval(this.timeout);

  timer = () => this.setState({ randomIndex: random(0, 999) });

  setTimer = () => (this.timeout = setInterval(this.timer, 3000));

  render = () => (
    <img
      src={`https://loremflickr.com/600/100?lock=${this.state.randomIndex}`}
    />
  );
}

或者，如果您不想使用 asetIterval并且该组件始终处于挂载状态...并且您只希望它在状态更改时更改...然后让HOC组件管理状态。然后，您可以利用HOC'render方法更新变量。

工作示例：https ://codesandbox.io/s/6qvl49vqw

import random from "lodash/random";
import React, { Component } from "react";
import Sample from "./Sample";

export default class Parent extends Component {
  state = {
    loadC1: false
  };

  shouldComponentUpdate = (nextProps, nextState) =>
    this.state.loadC1 !== nextState.loadC1;

  handleClick = () =>
    this.setState(prevState => ({ loadC1: !this.state.loadC1 }));

  render = () => {
    const randomIndex = random(0, 999);
    const { loadC1 } = this.state;

    return (
      <div style={{ textAlign: "center" }}>
        <button
          className="uk-button uk-button-primary"
          onClick={this.handleClick}
        >
          {!loadC1 ? "Show" : "Hide"} Component
        </button>
        <div style={{ marginBottom: 40 }}>
          {loadC1 && <Sample />}
        </div>
        <img src={`https://loremflickr.com/600/100?lock=${randomIndex}`} />
      </div>
    );
  };
}
于 2018-09-27T00:59:51.543 回答
1

如果您想在每次render调用时随机分配数字，请将该逻辑添加到您的render函数中：

render() {
  const randomized = this.randomizeSponsors(); // IMPORTANT: CHANGE THIS TO MAKE IT RETURN ARRAY INSTEAD OF SETSTATE
  return (
    <div>
      {randomized}
    </div>
  );
}
于 2018-09-27T00:00:02.187 回答