React Native - 使用 <Text> 获取数组答案

【问题标题】：React Native - Fetching array using <Text>React Native - 使用 <Text> 获取数组
【发布时间】：2018-10-31 08:42:42
【问题描述】：

我正在尝试从我的 api 进行调用并使用 Text> 显示我的 data/array，但我的输出是空白强>。

我也试过这个“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 接收数据

我在 Postman 中的输出：

应该显示此名称。

来自 api 的两个数据。

【问题讨论】：

来自邮递员截图；名称采用数组形式，但应用程序屏幕截图仅显示 1 个名称插槽。他们是否应该加入 1 个字符串，例如“Fish (Fish Fillet) / Redhorse (500ml)”？
不，先生，等等。我会更新一些截图
我明白了，所以有超过 1 项。在这种情况下，您实际上应该将名称放入菜单对象列表中，而不是像那样直接使用它们。名称未显示的原因可能是由于 this.state.menu_name 是一个对象数组，而 Text 无法显示。
我知道 Text 很难保存数组，先生。但正如您在我的代码中看到的那样，我的 Text 位于 View 中，而 View 已经位于 Flatlist 中。所以我不确定我将如何执行您的建议，即列表中的列表。（我不能 100% 确定这是否是您所指的，先生）
尝试检查我的答案，看看是否有帮助。这个想法是你只想使用一个数组。

标签： javascript android node.js reactjs react-native

【解决方案1】：

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

【讨论】：

感谢您的回复，先生。但它仍然没有工作。 “名称：”仍为空白。

【解决方案2】：

你必须尝试 id 和 parseInt 进行类型转换。

let id =parseInt(this.state.tbl);

fetch(`http://192.168.254.100:3308/OrdName/ordName/${id}`)
.then((response) => response.json())
.then((responseData) => {
    this.setState({ menu_name: responseData })
})

【讨论】：

感谢您的回复，先生。但它仍然没有显示我发送到我的 api 的名称。
你必须在参数中传递 id 那么你如何获得一个名字。您不会尝试控制台您的请求并检查您必须在请求中获取哪个参数。

【解决方案3】：

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

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

【讨论】：

【解决方案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>
          }} />

【讨论】：