将Json响应加载到本机响应中的下拉列表中

4 回答

• 2

  假设您正在使用react-native-material-dropdown .

  Example:

  Dopdown 组件：

  <Dopdown
    baseColor='white'
    itemColor='white'
    label='Select Cluster'
    data={this.state.drop_down_data} // initialise it to []
  />
  

  请求代码：

  fetch('url', {
    ...
  }).then((response) => response.json())
  .then((responseJson) => {
    var count = Object.keys(responseJson.message.Obj).length;
    let drop_down_data = [];
    for(var i=0;i<count;i++){
      console.log(responseJson.message.Obj[i].name) // I need to add 
      drop_down_data.push({ value: responseJson.message.Obj[i].name }); // Create your array of data
    }
    this.setState({ drop_down_data }); // Set the new state
  })
  .catch((error) => {
    console.error(error);
  });
  

  Doc:

  • React native state management

  • react-native-material-dropdown

  回复于 2024-05-09T04:32:06+08:00
• 0

  您可以通过使用react native“state”来实现此目的 . 创建一个状态，然后将其分配给Dropdown组件的数据属性 . 然后使用“this.setState（）”方法将responseJson.message.Obj [i] .names设置为state .

  回复于 2024-05-09T04:32:06+08:00
• 2

  • 找出您正在使用的 <Dropdown /> 组件所需的 data 属性的形状（即对象数组）

  • 在 componentDidMount 内进行抓取调用

  • 将组件的 state 视为不可变（不要直接 push 到 this.state. dropdownData ）

  以下是使用react-native-material-dropdown的示例代码：

  class Example extends React.Component {
         // Use constructor to assign initial state
         constructor(props) {
           this.state = {
             dropdownData: []
           };
         }
  
        componentDidMount() {
          fetch('url', {  
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              username : "admin"
            })
          })
          .then((response) => response.json())
          .then((responseJson) => {
            var count = Object.keys(responseJson.message.Obj).length;
            // We need to treat this.state as if it were immutable.
            // So first create the data array (tempDataArray) 
            var tempDataArray = [];
            for(var i=0;i<count;i++){
              // Note: react-native-material-dropdown takes an Array of Objects
              tempDataArray.push({
                value: responseJson.message.Obj[i].name
              });
            }
            // Now we modify our dropdownData array from state
            this.setState({
              dropdownData: tempDataArray
            });
          })
          .catch((error) => {
            console.error(error);
          });
        }
  
        // ...
        render() {
          return (
            // ...
            <Dropdown 
              baseColor='white'
              itemColor='white'
              label='Select Cluster'
              data={this.state.dropdownData} // Use dropdownData for the data prop
            />
            // ...
          );
        }
        // ...
      }
  

  见：AJAX Requests in React

  见：react-native-material-dropdown expected data type

  回复于 2024-05-09T04:32:06+08:00
• 8

  你也可以采取这样的方法：

  var Somedata = {
              "data" : [
                  {
                  "baseColor": "white",
                      "moreData":[
                          {
                              "id" : 118,
                          }
                      ]
                  },
                  {
                  "baseColor": "grey",
                      "moreData": [
                          {
                              "id": 1231231,
                          }
                      ]
                  }
              ]
          }
  const renderData = someData.data.map((data) => {
          return data.moreData.map(brand => {
              strColor = data.baseColor;
              console.log("Individual Data :" + strColor)
                  return `${data.baseColor}, ${moreData.id}`
                  //setState here?
          }).join("\n")
      }).join("\n")
  //setState here?
  

  您现在可以使用一些选项来设置状态 . 从您的示例中，您可以将列表状态设置为一旦呈现后从fetch调用返回的数据 . 需要记住的一件事是，react目前不支持异步加载 . 因此，数据必须呈现为空，或者使用一些示例数据，然后在调用任何您想要更新的内容后更新！希望这有点帮助:) https://reactjs.org/docs/faq-ajax.html

  回复于 2024-05-09T04:32:06+08:00