Question

如何将所有字段从API渲染到ListView React-Native 没有索引，字段名，记录名

我的json：

{
    success: true,
    result: [
                {
                    salutationtype: "Mr.",
                    firstname: "Steve",
                    address: "",
                    contact_no: "CON14",
                    lastname: "Mart",
                    mobile: "05-3376147-3",
                    title: "",
                    fax: "",
                }
    ]
}

My static medthodlogy

<Text> fieldsname </Text> <input value={rowData.firstname}/>
 <Text> fieldsname </Text> <input value={rowData.lastname}/>

（fieldname我不能动态渲染我曾经硬编码）

它的工作，但如果我有更多的数据，这是一场噩梦

return fetch(state.params.u_url+"/webservice.phpoperation=query&sessionName=)
     .then((response) => response.json())
     .then((responseJson) => {
       let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
       this.setState({
         data: responseJson.result,
         isLoading: false,
         dataSource: ds.cloneWithRows(responseJson.result),
       }, function() {
         // do something with new state
       });


     })
     .catch((error) => {
       console.error(error);
     });
}
render() {

  const { navigate } = this.props.navigation;
  const {state} = this.props.navigation;

  return (
    <View style={{flex: 1,flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
      <Text>{"\n"}</Text>
      <ListView
        enableEmptySections={true}
        dataSource={this.state.dataSource}
        renderRow={
          (rowData) =>
                        <Text> fieldsname </Text> <input value={rowData.firstname}/>
                        <Text> fieldsname </Text> <input value={rowData.lastname}/>
        }
      />
    </View>
  );
}

---------------------------------

需要此输出

[label] salutationtype : Mr. <<<<< [input]

[label] firstname : Steve <<<<< [input]

[label] address : ' ' <<<<< [input] **** it's null

[label] contact_no : CON14 <<<<< [input]

[label] lastname : mart <<<<< [input]

[label] mobile : 05-3376147-3 <<<<< [input]

[label] title : ' ' <<<<< [input] **** it's null

[label] fax : ' ' <<<<< [input] **** it's null

Answer 1

如果我找对你，我想你可能正在寻找这个。请注意，这不是React Native，而是React。但它们基本相同。所以我认为这应该对你有帮助：

const data = [
  {
      salutationtype: "Mr.",
      firstname: "Steve",
      address: "456",
      contact_no: "CON14",
      lastname: "Mart",
      mobile: "05-3376147-3",
      title: "as",
      fax: "sadf",
  },
  {
      salutationtype: "Ms.",
      firstname: "Ewan",
      address: "123",
      contact_no: "CON15",
      lastname: "Ko",
      mobile: "05-3376147-4",
      title: "sdf",
      fax: "sdfh",
  }
];

class App extends React.Component {

    render() {

    return(
        <div>
         {
        data && data.length > 0 ?
        data.map((obj, index) => {
          const fieldnames = Object.keys(obj);
          return fieldnames.map((f,i) => {
             return <p key={i}><strong>{f}</strong> : {obj[f]}</p>
          });      
        })
        :
        'no data to display'
       }
        </div>
    );
  }
}

ReactDOM.render(
    <App />,
  document.getElementById('mainContainer')
);

以下是上述代码的jsfiddle链接。尝试运行它。

如何将所有字段从API渲染到ListView React-Native

---------------------------------

1 个答案: