带有 React 的计时器无法读取未定义的属性秒数

Posted 2023-02-21

【中文标题】带有 React 的计时器无法读取未定义的属性秒数

【英文标题】：Timer with React cannot read property seconds of undefined

【发布时间】：2019-04-20 12:21:37

【问题描述】：

我正在尝试在 React 中创建一个计时器，但是我遇到了问题。 我得到的错误是：

Uncaught TypeError: Cannot read property 'seconds' of undefined'.

我试图理解，但我找不到问题所在。

有人可以帮我吗？

这是小提琴： https://jsfiddle.net/q806zeps/17/

谢谢。

我认为问题出在此处，因为如果我对渲染进行评论，就可以了。

<TimerInput 
    value=this.state.seconds 
    handleChange=this.handleChange 
/> 
<Minuteur 
    seconds=600 
    libelle="Pâtes"
/>```

【问题讨论】：

该错误意味着您正在尝试在定义之前读取某些内容的 seconds 字段。那里什么都没有。这个问题出现a lot。 （顺便说一句，这是在某些静态类型语言中不会出现的问题，例如 Haskell，因为它们无法创建没有价值的东西。）

【参考方案1】：

问题是您试图从父组件App 访问Minuteur 组件的状态和方法。

const App = () => 
    return (
    <div>
      <TimerInput value=this.state.seconds handleChange=this.handleChange />
      <Minuteur seconds=600 libelle="Pâtes"/>
    </div>
  )

this.state.seconds 和 this.handleChange 指的是 Minuteur 组件上的属性。由于TimerInput 和Minuteur 似乎需要共享一些状态，因此您有几个选择。

将TimerInput 和Minuteur 组件合并为一个，使它们具有相同的状态。 创建一个包含TimerInput 和Minuteur 的包装组件，并将共享状态（例如state.seconds）移动到该组件。

选项 2 的方法大致如下：

class Wrapper extends React.Component 
  constructor(props) 
    super(props)
    this.state =  
      seconds: 0
    

    this.handleChange = this.handleChange.bind(this);
  

  handleChange(event) 
    this.setState(
      seconds: event.target.value
    )
  

  render() 
    return (
      <div>
        <TimerInput value=this.state.seconds handleChange=this.handleChange />
        <Minuteur seconds=this.state.seconds libelle="Pâtes"/>
      </div>
    )
  


const App = () => 
  return (
    <div>
      <Wrapper />
    </div>
  )

【讨论】：

谢谢，但我现在有这个错误... react-dom.development.js:49 未捕获的错误：包装器（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。jsfiddle.net/q806zeps/26

我看不到您的错误，但请参阅 MrAleister 的回答，了解您需要进行的另一项更正。我刚刚用它更新了我的答案。

我错过了render() 的退货声明。答案已更新。

【参考方案2】：

快速而肮脏的解决方案 - 将初始 Wrapper 秒状态设置为除 0 以外的任何值（就像你原来的小提琴中的 600）：

this.state =  
  seconds: 600

【讨论】：

是的，但我希望输入在几秒钟内实时更改；）

好的 - 问题在于您的 TimerInput 组件缺少状态。这是一个答案：***.com/questions/37427508/…

我需要在 TimerInput 上添加一个构造函数？？

【参考方案3】：

只需将 return 添加到 Wrapper 的渲染中：

render() 
  return(
    <div>
      <TimerInput seconds=this.state.seconds handleChange=this.handleChange />
      <Minuteur seconds=this.state.seconds libelle="Pâtes"/>
    </div>
  )

【参考方案4】：

除了李维斯的回答（因为我还不能评论）：

您的 TimerInput 组件正在尝试读取道具秒数（不是值），因此您的渲染行应该如下所示：

<TimerInput seconds=this.state.seconds handleChange=this.handleChange />