Рандомное изменение стейта

153

14 декабря 2019, 10:20

Не получается выбрать рандомный элемент в this.state.cards и поменять его состояние:

    this.state = { 
      cards: [ 
        { 
          id: 1, 
          active: 0 
        }, 
        { 
          id: 2, 
          active: 0 
        }, 
        { 
          id: 3, 
          active: 0 
        } 
      ] 
    } 
     
    componentDidMount() { 
      let randomElem = Math.round(Math.random() * 2); //рандомлю число от 0 до 2 
      let randomCard = this.state.cards[randomElem].active; //подставляю зарандомленное число  
     
      this.setState({ 
        randomCard: 1 //пытаюсь изменить стейт в зарандомленном элементе массива 
      }) 
      console.log(this.state) 
     
  
  }

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

this.state.active как был 0, так и остается. Что я делаю не так?

Рабочий вариант здесь https://codepen.io/likeavenus/pen/jJQyQO?editors=0010

Answer 1

Сейчас вы в функции setState создаете новое свойство в state randomCard и ему устанавливаете значение 1, переменная randomCard и свойство объекта randomCard - это разные вещи. Вам нужно сначала создать новый массив, в нём изменить рандомный элемент и уже потом указать его в качестве свойства cards в state

class App extends React.Component { 
  constructor(props) { 
    super(props); 
     
    this.state = { 
      cards: [ 
        { 
          id: 1, 
          active: 0 
        }, 
        { 
          id: 2, 
          active: 0 
        }, 
        { 
          id: 3, 
          active: 0 
        } 
      ] 
    } 
  } 
 
  componentDidMount (){ 
    const randomElem = Math.round(Math.random() * 2); 
    const newCards = [...this.state.cards]; 
    newCards[randomElem].active = 1; 
     
    this.setState({ 
      cards: newCards 
    }); 
     
    console.log(this.state); 
     
  }   
 
  render() { 
    return <i>text</i>; 
  } 
} 
 
const rootElement = document.getElementById("root"); 
ReactDOM.render(<App/>, rootElement);

<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

Думаю логика понятна.

import React, { Component } from "react"; 
import ReactDOM from "react-dom"; 
 
class App extends Component { 
  state = { 
    data: [ 
      { 
        id: 1, 
        active: 0, 
      }, 
      { 
        id: 2, 
        active: 1, 
      }, 
      { 
        id: 3, 
        active: 2, 
      }, 
    ], 
    random: null, 
  } 
 
  componentWillMount = () => { 
    this.setState({ random: this.state.data[Math.round(Math.random() * 2)].active }); 
  } 
 
  componentDidMount = () => { 
    console.log(this.state.random); 
  }; 
 
  render() { 
    return ( 
      <h1>Some text</h1> 
    ); 
  } 
} 
 
const rootElement = document.getElementById("root"); 
ReactDOM.render(<App />, rootElement);