将属性添加到状态 React Redux 模板

Question

我是 React 的新手，我从获取 ReactRedux-CSharp Visual Studio Template 开始，并尝试向 state 添加其他属性。我在页面上有一个滑块，我想在位置更改时更新状态。有问题的模块是react-rangeslider。这个例子说要做这样的事情

import React, { Component } from 'react'
import Slider from 'react-rangeslider'

class VolumeSlider extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      volume: 0
    }
  }

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

  render() {
    let { volume } = this.state
    return (
      <Slider
        value={volume}
        orientation="vertical"
        onChange={this.handleOnChange}
      />
    )
  }
}

当我添加该代码时，我在构建 Webpack 时遇到错误

TS2339：“只读”类型上不存在属性“值”。

我查看了 index.d.ts（声明状态的地方），但不确定我需要做些什么来添加它。我是否需要为这个属性连接 actionCreators 和 reducers，还是有更简单的方法？任何帮助将不胜感激。

Answer 1

这是来自 Slider 组件的 TypeScript 错误。

它的意思是你传递的value={volume} 属性是undefined（或null，或非数字值），而它在组件中被强类型为Numberhere。你能打印它的值吗？

编辑：可能（很可能）文档是错误的，onChange 处理程序将事件作为参数，在这种情况下您应该这样做

handleOnChange = (event) => {
  this.setState({
    volume: event.target.value
  })
}

并向作者报告。