javascript - 为什么内容只在 onChange 之后才呈现?
问题描述
我正在使用rc-slider从数组中获取一堆值并将它们呈现在我的组件中。
const array = ["Hey", "Ho", "Me", "Too", "See"]
class App extends Component {
state = { sliderValues: [0, 1, 2, 3, 4] };
handleChange = sliderValues => {
this.setState({ sliderValues }, () => console.log(array[this.state.sliderValues]));
};
render() {
const renderContent = array.map((value, index) => {
console.log(value, 'value')
console.log(index, 'index')
if (index === this.state.sliderValues) {
return (
<div>
<h1>{value}</h1>
</div>
)
}
})
return (
<div>
{renderContent}
<Slider onChange={this.handleChange} min={0} max={4} defaultValue={this.state.sliderValues} marks={{ 0: 250, 1: 500, 2: 750, 3: 1000, 4: 1500 }} step={null} />
</div>
)
}
}
我只想一次显示数组中的一项。除了初始渲染外,一切正常。您会注意到该组件仅在您与<Slider />.
.
为什么是这样?
解决方案
import React, {Component} from "react";
import ReactDOM from "react-dom";
import Slider from 'rc-slider'
import "./styles.css";
const array = ["Hey", "Ho", "Me", "Too", "See"]
class App extends Component {
// you need to provide an initial value to be rendered at the first time
state = { sliderValues: 0 };
handleChange = sliderValues => {
this.setState({ sliderValues }, () => console.log(array[this.state.sliderValues]));
};
render() {
const renderContent = array.map((value, index) => {
console.log(value, 'value')
console.log(index, 'index')
if (index === this.state.sliderValues) {
return (
<div key={value}>
<h1>{value}</h1>
</div>
)
}
})
return (
<div>
{renderContent}
<Slider onChange={this.handleChange} min={0} max={4} defaultValue={this.state.sliderValues} marks={{ 0: 250, 1: 500, 2: 750, 3: 1000, 4: 1500 }} step={null} />
</div>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
推荐阅读
- mongodb - 如何让 Spring Data Mongo 聚合像使用 mongo 一样工作
- sql - 在数据流任务中附加两个数据源
- c++ - 算法中的排序函数返回错误
- git - GitHub Actions:如何定位除 master 之外的所有分支?
- python - 组合许多 numpy 数组的最节省内存的方法
- c# - 矩阵变换,绕x轴旋转
- mobx-state-tree - 具有单独 API 调用和单独存储的嵌套模型(使用自定义引用)
- angular - ERROR 错误:未捕获(承诺中):TypeError:xp(...).functions 不是函数 TypeError:xp(...).functions 不是函数
- cmake - nanomsg nng 库安装在哪里
- c - 从程序集中调用 libc 函数