React: Update conditional on state change?

Question

我认为这将是react的一个非常基本的功能，但是当变量状态改变时，它似乎不会更新我的代码，例如，如果isPlaying改变了，图标就不会。

的例子:

<button id="playButton" onClick={this.onPlayButtonClicked} className="bg-green-500 p-2 px-4 text-white rounded shadow">
{ this.isPlaying ?
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> :
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
}
</button>

onPlayButtonClicked定义:

onPlayButtonClicked = () => {
if (!this.isPlaying) {
this.start(0, Math.round(this.currentTime - 0.5));
this.isPlaying = true;
}
else {
this.isPlaying = false;
this.stop();
}
}

Answer 1

尝试将isPlaying添加到状态，并由this.state.isPlaying使用。当状态或道具发生变化时，组件将进行渲染。

Answer 2

isPlaying不是状态，所以它不会渲染，你不会看到任何变化。你可以使用state来处理它

像这样:

class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {isPlaying:false};
}
onPlayButtonClicked = () => {
if (!this.state.isPlaying) {
this.start(0, Math.round(this.currentTime - 0.5));
this.setState({isPlaying : true});
}
else {
this.setState({isPlaying : false});
this.stop();
}
}

，在JSX中:

<button id="playButton" onClick={this.onPlayButtonClicked} className="bg-green-500 p-2 px-4 text-white rounded shadow">
{ this.state.isPlaying ?
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> :
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
}
</button>

Answer 3

你必须把变量isPlaying放在状态变量中。像

constructor() {
super()
this.state = {
isPlaying: false
}
}

然后你可以通过

改变状态

this.setState({
isPlaying:true
})

那么你可以在你的代码中使用这个状态

{ this.state.isPlaying ?
<svg key={1} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> :
<svg key={2} className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
}

这将重新呈现组件，并显示您的更改。

Answer 4

set state usingthis.setState

onPlayButtonClicked = () => {
if (!this.state.isPlaying) {
this.start(0, Math.round(this.currentTime - 0.5));
this.setState({ isPlaying: true})
}
else {
this.setState({ isPlaying: false})
this.stop();
}
}

或使用功能更新程序，如果您有其他状态

onPlayButtonClicked = () => {
if (!this.state.isPlaying) {
this.start(0, Math.round(this.currentTime - 0.5));
this.setState((state, props) => ({ // get latest state and props
...state, // included existing state
isPlaying: true //updated only what is needed
}));
}
else {
this.setState((state, props) => ({
...state,
isPlaying: false
}));
this.stop();
}
}