1

Не получается выбрать рандомный элемент в 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

2 ответа 2

2

Сейчас вы в функции 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>

1
  • понял свою ошибку, спасибо 22 мар 2019 в 10:22
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);

3
  • спасибо что потратили время и ответили, но что в моем коде не так? 22 мар 2019 в 9:41
  • @RafaelShepard, где у Вас состояние randomCard?
    – meine
    22 мар 2019 в 10:04
  • я понял ошибку, спасибо! 22 мар 2019 в 10:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.