javascript - 如何定位通过 axios.get 请求发出的数组中的元素？

Question

我正在尝试创建一个标签来显示随时间变化的状态。我有一个包含所有状态的数据库，只需创建一个输出状态的 react 组件即可。我只需要输出一个，我尝试通过定位数组中的特定部分来做到这一点，但它给了我以下错误:

Cannot read property 'name' of undefined

class App extends React.Component {
  state = {
    drought_status: [],
    drought_id: 0
  };

  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
      console.log(res);

      this.setState({ drought_status: res.data });
    });
  }

  render() {
    return (
      <div>
        <UncontrolledDropdown>
          <DropdownToggle caret>Dropdown</DropdownToggle>

          <DropdownMenu>
            <DropdownItem>{this.state.drought_status[0].name}</DropdownItem>
          </DropdownMenu>
        </UncontrolledDropdown>
      </div>
    );
  }
}

Answer 1

在您的请求完成之前，您的 drought_status 数组为空，因此 this.state.drought_status[0] 将为未定义，并尝试访问 name 将会导致您的错误。

在尝试访问 name 之前，您可以检查 this.state.drought_status[0] 是否已设置。

示例

render() {
  const firstDroughtStatus = this.state.drought_status[0];

  return (
    <div>
      <UncontrolledDropdown>
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <DropdownMenu>
          {firstDroughtStatus ? (
            <DropdownItem>{firstDroughtStatus.name}</DropdownItem>
          ) : null}
        </DropdownMenu>
      </UncontrolledDropdown>
    </div>
  );
}