Question

我正在学习React Framework。当我尝试使用setState .map 函数从我的api中提取功能时，将无法正常工作。它呈现“ data.map不是函数”

这是我所知道的唯一方法：

   constructor(props) {
        super(props);
        this.state = {
          name: "secret",
          email: "secret",
          datas: []
        };
      }

    componentDidMount() {
        const { name, password} = this.state;

    fetch(
      `http://localhost:3000/api/user/account?username=${username}&email=${email}`
    )
      .then(res => res.json())
      .then(getdata => {
        this.setState({ datas: getdata });
      })
      .catch(err => console.log(err));
  }

render() {
    const { datas } = this.state;
    const repoItems = datas.map(data => (
      <div key={data.id}>
       <p>{data.name}</p>
       <p>{data.email}</p>
      </div>

    ));

    return (
      <div>
        {datas}
      </div>
    );
  }

我写错了代码吗，或者除此之外还有其他方法吗？

Answer 1

从顶视图看，您的代码一切正常。 map仅在数组上运行，我可以看到您也在将默认状态设置为数组。但是，问题可能出在您从fetch呼叫获得响应之后尝试设置状态

  fetch(
      `http://localhost:3000/api/user/account?username=${username}&email=${email}`
    )
      .then(res => res.json())
      .then(getdata => {
        this.setState({ datas: getdata });
      })
      .catch(err => console.log(err));

在这里，您需要确保无论设置什么数据，它都应该是一个数组。因此，如果您未在响应中获取数组，请将该值设置为实际上是一个数组，并且如果响应为空，则将一个空数组设置为state，如下所示：

 // may be array is a property of response
 this.setState({ datas: getdata.array });
 // may be getdata is empty
 this.setState({ datas: getdata || [] });

如何处理[.map不是函数]

1 个答案: