传递给组件的未定义状态

Question

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

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 是undefined。

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[]>([]);