如何修复状态映射​​不是 React Native 中的功能？

Question

我目前正在学习react native，并探索在列表视图中渲染api数据的过程。现在我已经有了 api 数据，但是当我尝试映射它说的数组时。

TypeError：this.state.readings.map 不是函数。 （在'this.state.readings.map（函数（值）{ 返回控制台.log（值）； })', 'this.state.readings.map' 未定义）

这里是示例 api：

Sample JSON

在我的 ComponentDidMount 内部：

componentDidMount() {
  
    fetch('http://myip:3000/api/readings/3')
    .then(response => response.json())
    .then(data => this.setState({readings:JSON.stringify(data)}))
}

我的州：

this.state = {
  readings:[],
}

我的渲染：

render() {
    console.log(this.state.readings);
    return (
       
        {

            this.state.readings.map(value => {
                return (
                    console.log(value)
                )
            })

        }         
    )
}

Answer 1

我知道这是使用功能组件，但行为相同

https://snack.expo.io/I0VJsF1z5

问题可能在这一行 .then(data => this.setState({readings:JSON.stringify(data)}))

Answer 2

编辑

如果 this.state.readings 的值为[{"id":1,"AccountNo":"011-001","ConsName":"Jenny Fox.","Address":"Pacific Triad Road."}]。

那么这段代码应该可以工作了。

并且由于您的数据正在异步加载。您可以在映射之前添加对 this.state.readings 的检查。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      readings: [
        {
          id: 1,
          AccountNo: "011-001",
          ConsName: "Jenny Fox.",
          Address: "Pacific Triad Road."
        }
      ]
    };
  }
  render() {
    return (
      this.state.readings.length &&
      this.state.readings.map((value) => {
        console.log(value);
        return <div>{value.Address}</div>;
      })
    );
  }
}

参考：https://codesandbox.io/s/ancient-cdn-5695m?file=/src/App.js:51-484