Question

我正在尝试创建一个标签，该标签将显示随时间变化的状态。我有一个具有所有状态的数据库，只需要创建一个将输出状态的React组件即可。我只需要输出一个，而林正试图通过针对数组中的特定部分来做到这一点，但这给了我以下错误：

无法读取未定义的属性“名称”

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]将为undefined，并且尝试访问name会引发错误。

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

示例

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>
  );
}

如何定位通过axios.get请求创建的数组中的元素？

1 个答案: