Question

未定义状态传递到组件

2021-05-15

71

reactjs typescript jsx setstate react-functional-component

我有一个如下所示的类组件：

interface MyState {
  x_array: number[]
  y_array: number[]
  order_graph_1: number
}

class ItemsContainerOld extends React.Component<MyProps, MyState> {
  constructor(props: MyProps) {
    super(props)
    this.state = {
      x_array: [],
      y_array: [],
      order_graph_1: 1,
    }
  }

  addingCoordinate(coord: {x: number; y: number}) {
    const new_x_array = this.state.x_array.concat(coord.x)
    const new_y_array = this.state.y_array.concat(coord.y)
    this.setState({
      x_array: new_x_array,
      y_array: new_y_array,
    })
  }

  setOrders(orders: number[]) {
    this.setState({
      order: orders[0],
    })
  }

  render() {
    return (
      <div
        
      >
        <div>
          <div>
            <DrawerOld
              addCoord={this.addCoord.bind(this)}
              resetCoords={this.resetCoords.bind(this)}
            />
          </div>
          <div style={{paddingLeft: '70px', paddingTop: '50px'}}>
            <Initial
              x={this.state.x_array}
              y={this.state.y_array}
              deg={this.state.order_graph_1}
              color={this.color_graph_1}
            />
          </div>
        </div>
      </div>
    )
  }
}

export default ItemsContainerOld

我将其更改为功能组件。但是，在使用功能组件时，在此组件中：

<Initial x={x_array} y={y_array}

我开始收到类似这样的错误

TypeError: Cannot read property 'length' of undefined

如何确保正确的值到达该组件？这是一个 codesandbox ： https://codesandbox.io/s/infallible-thunder-xsbrm?file=/src/ItemsContainerNew.tsx

Answer 1

您始终可以检查值是否未定义，例如：


    if(this.props.x.length===undefined){
      return;
    }

并且如果您愿意，可以在那里使用一些默认值。

**这是方法，每次遇到这种情况时，您都必须设置一些条件作为解决方法或设置初始默认值。

这是我的沙盒： https://codesandbox.io/s/vigilant-perlman-rzwge?file=/src/Initial.tsx:932-973

以及您应该知道的反应生命周期：

更新的代码，完全可以正常工作： https://codesandbox.io/s/goofy-microservice-mw5j6?file=/src/Initial.tsx

Answer 2

您可以通过将

if (props.x.length === 0 && props.y.length === 0)

更改为

if (!props.x && !props.y)

来解决问题。

尽管这可能掩盖了更深层次的问题。最好弄清楚为什么 props.x 或 props.y 是 未定义的 。

Answer 3

您需要改进状态初始化。

尝试不要将值设置为 type 'any' ，更精确地说，在初始化 x_array 和 y_array 时，您可以使用

// Notice that not only the type has changed from "any" to "number[]",
// But the initial value is now an empty array, causing their initial values 
// (and types) to be arrays since their starting point.
// When initialization happens without a starting value like "useState()",
// The state receives the value "undefined" which causes the error.

const [x_array, setXarray] = useState<number[]>([]);
const [y_array, setYattay] = useState<number[]>([]);