Question

编辑：通过切换到其他Android手机模拟器

来解决此问题

我试图创建一个简单的React Native应用程序，首先从Express后端获取json文件。

后端：

...data to be fetched up here in a dictionary

//Enable CORS
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(bodyParser.json());

app.get('/sightings', (req, res) => {
  res.json(sightings);
});

app.post('/sightings', (req, res) => {
  req.body.id = (sightings.length + 1).toString();
  sightings.push(req.body);
  res.json(req.body);
});

app.get('/species', (req, res) => {
  res.json(species);
});

const port = process.env.PORT ? process.env.PORT : 8081;
const server = app.listen(port, () => {
    console.log("Server listening  port %s", port);
});

前端：

export default class Menu extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            key: '',
            sightings: [],
        }
    }

    componentDidMount() {
        fetch('http://10.0.0.2:3000/sightings')
            .then(res => res.json())
            .then(res => {
                this.setState({sightings: res })
            })
            .catch((error) => {
                console.log(error);
            });
        console.log(this.state.sightings);
    }

显然，这里的重点是用状态更新状态中的目击，但它不起作用，我只返回最初分配给this.state.sightings的空对象。

我缺少一些步骤吗？我是一个使用节点服务器的初学者，我所遵循的各种教程都是这样的。

data on local host

Answer 1

this.setState是一个异步函数，需要时间才能完成。如果要记录更新的状态，精确的方法是将其记录在this.setState的回调中。这应该有效，

      fetch('http://10.0.0.2:3000/sightings')
            .then(res => res.json())
            .then(res => {
                this.setState({sightings: res }, () => {
                   console.log(this.state.sightings);
                })
            })
            .catch ((error) => {
                console.log(error);
            });

浏览文档以了解setState的工作原理https://reactjs.org/docs/react-component.html#setstate

Answer 2

好的家伙，结果一切正常，但我正在使用的Android模拟器（Pixel_API_26）没有。当我切换到Nexus_4_API_23时，一切正常。

React Native从Express.js服务器获取数据

2 个答案: