React调用randomuser.me API成功但报Cannot read properties of picture错误如何解决

核心问题原因 #

• 异步执行顺序错误：peticionImagenPersona是异步请求函数，你调用它之后立刻读取this.state.peticionImagen，此时请求还未返回，state里的peticionImagen还是初始值null，访问null.picture自然抛出错误。而且setState本身也是异步更新，就算请求返回，state也不会立刻生效。
• 接口返回结构读取错误：randomuser.me接口返回的results是数组类型，你直接把数组赋值给peticionImagen，就算请求完成，直接读数组的picture属性也是不存在的，需要取下标为0的元素才能拿到用户数据对象。
• state字段逻辑冲突：你state里的peticionImagen一会存接口返回的数组，一会又要存图片URL字符串，类型混乱容易出问题，你本来就定义了image字段可以专门存图片URL。

修复后代码 #

class PersonasInsert extends Component {
  urlPersonas = "https://randomuser.me/api/?inc=picture";

  constructor(props) {
    super(props);
    this.state = {
      name: "",
      last: "",
      image: "", // 专门存储图片URL
    };
  }

  peticionImagenPersona = async () => {
    try {
      const response = await axios.get(this.urlPersonas);
      // results是数组，取下标0的用户对象，提取large尺寸的图片地址
      const imgUrl = response.data.results[0].picture.large;
      this.setState({ image: imgUrl });
    } catch (error) {
      console.log(error);
    }
  };

  handleChangeImage = async (event) => {
    // 直接调用请求函数，请求完成后内部会自动更新state
    await this.peticionImagenPersona();
  };

  render() {
    const { image } = this.state;
    return (
      <Wrapper>
        <Title>Insertar Persona</Title>
        <Label>image: </Label>
        <InputText
          type="text"
          value={image}
          readOnly
          onClick={this.handleChangeImage}
        />
      </Wrapper>
    );
  }
}

export default PersonasInsert;

额外注意事项 #

• 异步请求的后续逻辑要放在请求回调里，或者await异步函数之后再执行，不能在调用异步函数后立刻读取未更新的state
• 读取接口返回数据前先确认数据结构，数组类型要先取对应下标的元素再读取属性

内容的提问来源于stack exchange，提问作者Mario Almaguer