Question

我正在尝试通过api进行调用，并使用<< strong>文本>显示我的数据/数组，但是我的输出为空白 strong>。

我还尝试了此“ this.setState（{menu_name：json [0] .ordName}）”，但是它只会获取单个数据。我的目标是获取一个数组。

这是我的代码

settlement.js

constructor(props){
super(props)
    this.state = {
        ....
        menu_name: []
        tbl: this.props.navigation.state.params.tbl,
    };
}
fetchOrdName = async () => {
    const response = await fetch("http://192.168.254.100:3308/OrdName/ordName/" + this.state.tbl )
    const json = await response.json()
    this.setState({ menu_name: json })
}
componentDidMount() {
    this.fetchOrdName();
    .....
}

render() {
    return (
        <View>
            <FlatList
             .....
                    <View>
                        <Text>Name: { this.state.menu_name.ordName }</Text>
                        ....
                    </View>
            />
        <View/>
)}

我的后端：

OrdName.js（模型）

var Task = {
    OrdName:function(id,callback) {
        return db.query("SELECT menu_name AS ordName FROM orders where tbl_id=?",[id],callback);
    },
}

OrdName.js（路线）

var Task = require('../models/OrdName');

router.get('/ordName/:id?', (req, res, next) => {
    Task.OrdName(req.params.id,function(err,rows){
        if(err)
        {
            res.json(err);
        }
        else{
            res.json(rows);
        }
    });
});

屏幕截图：

将数据发送到api

从api接收数据

我在邮递员中的输出

应显示此名称。

两个来自api的数据。

Answer 1

fetch("http://192.168.254.100:3308/OrdName/ordName/" + this.state.tbl )
.then((response) => response.json())
.then((responseData) => {
    this.setState({ menu_name: responseData })
})

Answer 2

您必须尝试使用parseInt的id进行类型转换。

numpy

Answer 3

如果我错了，请纠正我，您提取的数据menu_name是一个数组。然后，您应该像<Text>Name: { this.state.menu_name[ 0 ].ordName }</Text>那样访问其内容，或者像这样循环遍历它：

{    
     this.state.menu_name.map( ( menu ) => {
         return ( <Text>{menu.ordName}</Text> )
     });
}

Answer 4

我的猜测是，Text无法显示对象数组，因此显示为空。例如，也尝试将名称放入订购商品的数组中（我假设this.state.ordered_item是包含所有订购信息的数组）：

constructor(props) {
  super(props);
  this.state = {
    menu_name: [],
    ordered_item: [{name: '', price:110, discount: 0, quantity: 1}, {name: '', price:105, discount: 0, quantity: 1}],
  };
}

fetchOrdName = async () => {
    const response = await fetch("http://192.168.254.100:3308/OrdName/ordName/" + this.state.tbl )
    const json = await response.json()
    for (let i=0; i<json.length; i++) {
      this.state.ordered_item[i].name = json[i].ordName;
    }
    this.setState(this.state);
}

然后在渲染时，而不是使用2个不同的数组，只需使用一个：

<FlatList data={this.state.ordered_item}
          renderItem={(item)=>{
            <View>
              <Text>{item.name}</Text>
              {the rest of the rendering codes}
            </View>
          }} />

React Native-使用<text>获取数组

4 个答案: