React 使用时 undefined 和 null 可能会是个坑

在 React 中，我们经常会使用 props 和 state 来传递数据。然而，如果不小心将 props 或 state 设置为 undefined 或 null，就会导致一些意想不到的问题。

undefined 和 null 的问题

在 JavaScript 中，undefined 和 null 都表示没有值。然而，在 React 中，它们可能会导致组件不渲染或出现异常。例如，如果将 props 设置为 undefined 或 null，那么在组件中使用时，可能会出现以下情况：

function MyComponent(props) {
  return (
    <div>{props.name}</div>
  );
}

<MyComponent name={undefined} /> // 渲染出来的是空白
<MyComponent name={null} /> // 渲染出来的是 null

这种情况下，我们期望渲染出来的是一个空字符串，而不是空白或 null。

解决方案

为了避免这种问题，我们需要在组件中对 props 和 state 进行默认值的设置。可以使用 defaultProps 和 propTypes 来设置默认值和类型检查。

// javascriptcn.com 代码示例
function MyComponent(props) {
  return (
    <div>{props.name || ''}</div>
  );
}

MyComponent.defaultProps = {
  name: ''
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired
};

这样，如果 props 没有传递，或者传递了 undefined 或 null，组件就会使用默认值。同时，propTypes 会检查传递的值是否符合预期的类型。

注意事项

虽然设置默认值可以避免一些问题，但在实际开发中，我们也需要注意一些细节。

首先，如果组件的 props 或 state 可能为 undefined 或 null，那么在使用时需要进行判断，避免出现异常。

function MyComponent(props) {
  if (!props.name) {
    return null;
  }
  return (
    <div>{props.name}</div>
  );
}

其次，需要注意在使用对象或数组时，不能将其设置为 undefined 或 null，而应该设置为空对象或空数组。

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  state = {
    data: []
  };
  componentDidMount() {
    fetchData().then(data => {
      this.setState({
        data: data || []
      });
    });
  }
  render() {
    return (
      <ul>
        {this.state.data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

总结

在 React 中，undefined 和 null 可能会导致一些问题，因此需要在组件中设置默认值和类型检查。同时，在使用对象或数组时，不能将其设置为 undefined 或 null，而应该设置为空对象或空数组。只有这样，才能保证组件的稳定性和可靠性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6575cf42d2f5e1655df1b34f