在开始时设置状态

Question

函数每10秒返回一个随机字符串，我想在函数开头的字符串数组中设置一个单词

我尝试在生命周期开始时设置状态

  componentDidMount(){
    this.setState({
        randomItem: 
  this.setState({randomItem:this.randomItemGenerator()})
    },
    this.interval = setInterval(() => {
        this.setState({randomItem:this.randomItemGenerator()})
    }, 10000)
  });

-组件

class Word extends Component {
state={
    randomItem:''
}

myArray = [
    "esplendor",
    "diciendo",
    "impredecible",
    "problema",
    "terreno",
    "instante",
];

randomItemGenerator = () => (
    this.myArray[Math.floor(Math.random()*this.myArray.length)]
)

componentDidMount(){
    this.setState({
        randomItem: this.setState({randomItem:this.randomItemGenerator()})
    },
    this.interval = setInterval(() => {
        this.setState({randomItem:this.randomItemGenerator()})
    }, 10000)
});




render(){
   return(
      <div><h3>{this.state.randomItem}</h3></div>
   )
}
}

在componentdidmount之前还有另一个生命周期吗？

Answer 1

由于myArray和randomItemGenerator不使用props或其他状态，你可以移动组件的外部，在初始化状态时使用它们。

const myArray = [
  "esplendor",
  "diciendo",
  "impredecible",
  "problema",
  "terreno",
  "instante",
]

const randomItemGenerator = () => (
  myArray[Math.floor(Math.random() * myArray.length)]
)

class Word extends React.Component {
  state = {
    randomItem: randomItemGenerator()
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        randomItem: randomItemGenerator()
      })
    }, 10000)
  }
  
  componentWillUnmount() { // clear the interval when the component is unmounted
    clearInterval(this.interval);
  }

  render() {
    return (
      <div><h3>{this.state.randomItem}</h3></div>
    )
  }
}

ReactDOM.render(
   <Word />,
  root
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

但是，您可能希望从 props 中获取单词数组。在这种情况下，将randomItemGenerator 更改为接受数组作为参数，并在调用函数时传递相关属性（示例中为words）。

const randomItemGenerator = (words) => (
  words[Math.floor(Math.random() * myArray.length)]
)

class Word extends React.Component {
  state = {
    randomItem: randomItemGenerator(this.props.words)
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        randomItem: randomItemGenerator(this.props.words)
      })
    }, 10000)
  }
  
  componentWillUnmount() { // clear the interval when the component is unmounted
    clearInterval(this.interval);
  }

  render() {
    return (
      <div><h3>{this.state.randomItem}</h3></div>
    )
  }
}

const myArray = [
  "esplendor",
  "diciendo",
  "impredecible",
  "problema",
  "terreno",
  "instante",
]

ReactDOM.render(
   <Word words={myArray} />,
  root
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

只需在状态初始化中调用你的函数：

class Word extends Component {
    state = {
        randomItem: this.randomItemGenerator()
    }