Question

在组件之间传递数据时出错

2019-06-26

145

reactjs components state prop

我试图将一个值从一个组件 - Counters.jsx 传递到 Counter.jsx。当我转到开发人员控制台并进行记录时，我可以从 this.props.value 获取数据，但是当我尝试将其设置为状态时，我收到以下错误：TypeError：无法读取未定义的属性“值”。

// This is the component: Counters

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
  { id: 1, value: 4 },
  { id: 2, value: 0 },
  { id: 3, value: 0 },
  { id: 4, value: 0 }
  ]
};

render() {
return (
  <div>
    {this.state.counters.map(counter => (
      <Counter key={counter.id} value={counter.value} selected={true} />
    ))}
  </div>
);
}
}



// This is the component: Counter

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: this.props.value
  };

当我将状态 - Count 设置为 this.props.value 时，问题出现在 Counter 类中。但是，如果我执行 console.log(this.props.value)，则可以访问此值。

我收到此错误：未捕获的 TypeError：无法读取未定义的属性“值”

有人知道我是否遗漏了某些内容，以及为什么我可以使用 console.log 访问它，但无法将状态计数设置为 this.props.value？

Answer 1

在构造函数中设置：

constructor(props) {
    super(props);
    this.state = {
      count: props.value,
    };
}

Mosè Raguzzini

2019-06-26

Answer 2

您必须在构造函数中设置默认值，并在 componentDidUpdate 方法中更新状态。

constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
}

componentDidUpdate(prevProps, prevState) {
   this.setState({count : this.props.value });
}

Answer 3

您可能错过的是在构造函数中将 props 传递给 super。

constructor(props) { 
  super(props); 
  this.state = { count:this.props.value, }; 
}

您不能在构造函数中使用 this.props 而不将其传递给 super。

此外，正如答案之一所说，您需要处理没有传递 prop 的情况。

我建议您在这种情况下使用默认 props。

检查此处以了解默认 props 和 prop 类型。