Question

我有一个大约50个_source条目具有以下形状的JSON：

   {
"hits": [
    {
        "_source": {
            "name": "henry",
            "jobs": ["judge", "lawyer"]
        }
    },
    {
        "_source": {
            "name": "henry",
            "jobs": ["dev", "waitress"]
        }
    }
    // ...
]
}

在社区的帮助下，我提取了每个工作，如下所示：

const result = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], []) 

console.log(result) // this is an array

我从结果中提取了每个项目，并添加了一个字符串（例如“欢迎评委”）：

  for(i in result)   
        { 
          var message = 'welcome'+ result[i] //this is a string              
        }

所以现在，我想使用一个平面列表来呈现我的消息：

 constructor() {
   super()
   this.state = { dataSource:'' }
}

componentDidMount() {
fetch('uri')
.then(response => response.json())
.then(json => { 
   const result = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], []) // this is an array
   for(i in result)   
    { 
      var message = 'welcome'+ result[i] //this is a string              
    }
    this.setState({ dataSource : messsage})
}

renderItem =({item}) => {
return( 
<View>     
  <Text>item</Text>
</View>)
}


render() {  
return (
  <View>
      <FlatList 
        data= {[this.state.dataSource]}
        renderItem= {this.renderItem}
      /> 
  </View>      
);
}

我只有一条消息（而不是我的列表）和警告“缺少该项目的钥匙”

Answer 1

您的单位列表中应包含keyExtractor={(x, i) => i.toString()}。

<FlatList 
   data= {[this.state.dataSource]}
   keyExtractor={(x, i) => i.toString()}
   renderItem= {this.renderItem}
/>

这是一个FlatList keyExtractor定义。

Answer 2

您将仅收到一条消息，因为您的输入数据只是一个字符串（已转换为render（）中的数组以符合规范）。您可以在每次迭代中更改单个字符串变量，并使用最后一次更改的变量进行更新。在继续进行Iterable中的下一项之前，您确实需要将每个字符串放入数组中。

constructor() {
   super()
   this.state = { dataSource: [] }
}

componentDidMount() {
fetch('uri')
.then(response => response.json())
.then(json => { 

   // Get all jobs in a single array
   const results = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], []);

   // Iterate over results, concatenate with 'welcome' and push into a new array
   let messages = [];
   for(i in result)   
    { 
      let message = 'welcome'+ result[i];
      messages.push(message);             
    }

    // Update state with the new array 'messages'
    this.setState({ dataSource : messages })
}

renderItem = ({ item }) => {
  return( 
    <View>     
      <Text>{item}</Text>
    </View>
  );
}


render() {  
  return (
    <View>
      <FlatList 
        data={this.state.dataSource}
        keyExtractor={(x, i) => i.toString()}
        renderItem= {this.renderItem}
      /> 
    </View>      
  );
}

Answer 3

因为您的数据源包含单个字符串。在这里，您将在每次迭代中更新消息var，因此它将只在结果数组的最后一个字符串前加上'hello'。

for(i in result)   
        { 
          var message = 'welcome'+ result[i]

}

您应该执行类似的操作

    componentDidMount() {
        fetch('uri')
        .then(response => response.json())
        .then(json => { 
           const result = hits.reduce((acc, item) => acc = [item._source.jobs[0], ...acc], [])
           let messages=[];
           for(i in result)   
            { 
              messages.push('welcome '+ result[i]); //push each element in array             
            }
           this.setState({ dataSource : messsages})
        }

使用密钥提取器删除丢失的密钥警告

render() {  
return (
  <View>
      <FlatList 
        data= {[this.state.dataSource]}
        renderItem= {this.renderItem}
        keyExtractor={(item, index) => item + index}
      /> 
  </View>      
);
}

React Native /在FlatList中使用字符串作为数据吗？

3 个答案: