Question

这真的让我发疯。我写了很多组件，这很基础，但是在这种简单情况下，可能有些我无法实现。基本上，设置状态后，渲染不会被更新。

char

更新的代码...但是仍然无法使用...

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

Answer 1

1）您忘记将其绑定到setIndex方法：setIndex=(ndx)=> {

2）setState错误，替换为：this.setState({ selected: ndx });

结果：

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

Answer 2

您有：

this.setState = {selected: ndx}

这不是您设置状态的方式。试试这个：

this.setState({ selected: ndx });

此外，如@benjamin所述，您还应该使用箭头函数来绑定setIndex函数：

setIndex = () => { ... }

或在构造函数中进行绑定：

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

您可以在setState here上阅读文档。

setState后反应不更新渲染

2 个答案: