установка состояния в начале - PullRequest
Новая
       5

установка состояния в начале

0 голосов
/ 30 октября 2019

функция возвращает случайную строку каждые 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>
   )
}
}

Есть ли еще один жизненный цикл перед компонентом didmount?

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Просто вызовите вашу функцию в состоянии инициализации: 

class Word extends Component {
    state = {
        randomItem: this.randomItemGenerator()
    }
1 голос
/ 30 октября 2019

Поскольку 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>

Однако вы можете получить массив слов из реквизита. В этом случае измените 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>
...