在setState之后反应不更新渲染

问题描述 投票:0回答:2

这真的让我疯狂。我写了很多组件,这是如此基本,但可能在这个简单的场景中我无法实现。基本上,当我设置状态时,我的渲染没有被更新。

import React, {Component} from 'react'
import styles from './styles'
import {css} from 'aphrodite'

export class Switcher1 extends Component {
  constructor(props) {
    super(props)
    this.state = {
        selected: 0
    }
 }

setIndex(ndx) {
    console.log(ndx)
    this.setState = {selected: ndx}
}

render() {
    console.log('Rendering...')
    const sel = this.state.selected
    return (
        <div className={css(styles.container)}>
            {this.props.options.map((item, index) => {
                const isSelected = index === sel
                return <div key={index}
                            className={isSelected ? css(styles.active) : css(styles.notActive)}
                            onClick={() => this.setIndex(index)}>
                    <img className={css(styles.image)}
                         src={"/assets/images/" + item.icon + (isSelected ? '_blue.svg' : '_white.svg')}/>
                    &nbsp;{item.text} - {sel} - {index} - {isSelected.toString()}
                </div>
            })}
        </div>)
  }
}

更新了代码...但它仍然不起作用......

import React, {Component} from 'react'
import styles from './styles'
import {css} from 'aphrodite'

export class Switcher1 extends Component {
constructor(props) {
    super(props)
    this.state = {
        selected: 0
    }
    this.setIndex = this.setIndex.bind(this)
}

setIndex(ndx) {
    console.log(this.state)
    this.setState = ({selected: ndx})
}

render() {
    console.log('Rendering...')
    const sel = this.state.selected
    return (
        <div className={css(styles.container)}>
            {this.props.options.map((item, index) => {
                const isSelected = index === sel
                return <div key={index}
                            className={isSelected ? css(styles.active) : css(styles.notActive)}
                            onClick={() => this.setIndex(index)}>
                    <img className={css(styles.image)}
                         src={"/assets/images/" + item.icon + (isSelected ? '_blue.svg' : '_white.svg')}/>
                    &nbsp;{item.text} - {sel} - {index} - {isSelected.toString()}
                </div>
            })}
        </div>)
   }
}


Any thoughts ?
reactjs
2个回答
3
投票

1)你忘了将它绑定到你的setIndex方法:setIndex=(ndx)=> {

2)setState是错误的,替换为:this.setState({ selected: ndx });

结果:

setIndex = (ndx) => {
    console.log(ndx);
    this.setState({ selected: ndx });
}

1
投票

你有:

this.setState = {selected: ndx}

这不是你设置状态的方式。试试这个:

this.setState({ selected: ndx });

另外,正如@benjamin所提到的,你应该使用箭头函数来改变setIndex函数:

setIndex = () => { ... }

或在您的构造函数中绑定:

this.setIndex = this.setIndex.bind(this);

你可以阅读关于setState here的文档。

© www.soinside.com 2019 - 2024. All rights reserved.