这真的让我疯狂。我写了很多组件,这是如此基本,但可能在这个简单的场景中我无法实现。基本上,当我设置状态时,我的渲染没有被更新。
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')}/>
{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')}/>
{item.text} - {sel} - {index} - {isSelected.toString()}
</div>
})}
</div>)
}
}
Any thoughts ?
1)你忘了将它绑定到你的setIndex方法:setIndex=(ndx)=> {
2)setState是错误的,替换为:this.setState({ selected: ndx });
结果:
setIndex = (ndx) => {
console.log(ndx);
this.setState({ selected: ndx });
}
你有:
this.setState = {selected: ndx}
这不是你设置状态的方式。试试这个:
this.setState({ selected: ndx });
另外,正如@benjamin所提到的,你应该使用箭头函数来改变setIndex
函数:
setIndex = () => { ... }
或在您的构造函数中绑定:
this.setIndex = this.setIndex.bind(this);
你可以阅读关于setState
here的文档。