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

Question

Im trying to create a label that will display a status that changes over time. I have a database that has all the statuses, its just a matter of creating a react component that will output the status. I just need to output one and Im trying to do that by targeting the specific portion in an array, but it's giving me a the following error:

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

Your drought_status array is empty before your request is complete, so this.state.drought_status[0] will be undefined , and trying to access name on that will give rise to your error.

You could check that this.state.drought_status[0] is set before you try to access name .

Example

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