Почему метод возвращает [object Object]?

Question

[Дмитрий Ярощук]

Есть метод checkWinner, который который срабатывает при клике на <ButtonResult checkWinner={this.checkWinner}/>. Данный метод находит наибольшее значение ключа в объекте this.state и выводит в консоль.
Проблема заключается в том, что выводит {"[object Object]":1}, а вместо [object Object] должен быть id, к примеру voute1.

export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            vote1: 0,
            vote2: 0,
            vote3: 0,
            vote4: 0,
            vote5: 0,
        }
        this.increaseVote = this.increaseVote.bind(this);
        this.checkWinner = this.checkWinner.bind(this);
    }
    increaseVote(id) {
        return this.setState(state => {
            console.log({[id]: state[id]});
            return {[id]: state[id] + 1}
        })
    }
    checkWinner(id) {
        console.log({[id]: Math.max(...Object.values(this.state))})
        return this.setState({
            [id]: Math.max(...Object.values(this.state))
        })
    }
  render() {
    return (
        <Wrapper>
          <List>
            <Item text="&#128540;" id="vote1" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128520;" id="vote2" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128640;" id="vote3" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128526;" id="vote4" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128566;" id="vote5" increaseVote={this.increaseVote} state={this.state}/>
          </List>
          <ButtonResult checkWinner={this.checkWinner}/>
          <Winner/>
        </Wrapper>
    )
  }
}
export default class ButtonResult extends React.Component {
    render() {
        const { checkWinner } = this.props;
        return (
            <button onClick={checkWinner} className="button-result">Result</button>
        )
    }
}

Comments

[0xD34F]

Рано вы за react взялись.

Answer 1

[0xD34F]

checkWinner(id) {
    console.log({[id]: Math.max(...Object.values(this.state))})

onClick={checkWinner}

Внутри метода думаете, что получаете id, а на самом деле объект события клика. Используете этот объект как имя свойства другого объекта, но ключами могут быть только строки, так что объект события клика будет преобразован в строку. [object Object] - дефолтное строковое представление объекта. Всё.

Comments

[Дмитрий Ярощук]

0xD34F подскажите а как решить данную проблему, я пробовал по разному но ничего не помогает, или я не в том направление мыслю к примеру

checkWinner(id) {
        console.log(typeof id)
        console.log(id)
        console.log(typeof{[id]: Math.max(...Object.values(this.state))})
        console.log({[id]: Math.max(...Object.values(this.state))})
        return this.setState(state => {
            return JSON.stringify({
                [id]: Math.max(...Object.values(state))
            })
        })
    }

Или

checkWinner(id) {
        console.log(typeof id)
        console.log(id)
        console.log(typeof{[id]: Math.max(...Object.values(this.state))})
        console.log({[id]: Math.max(...Object.values(this.state))})
        return this.setState(state => {
            return JSON.stringify({
                [id.toString()]: Math.max(...Object.values(state))
            })
        })
    }

[0xD34F]

Дмитрий Ярощук, нет, так не будет. Вы что спросили - на то я и отвечаю, на большее тут не рассчитывайте. Что-то непонятно в ответе? - уточните. Всё понятно, хотите двигаться дальше? - вопрос закрыт, оформляйте новый.