Реагировать родной / Использование строк в качестве данных в FlatList?

Question

У меня есть JSON со следующей формой для ~ 50 _источников:

   {
"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

Я извлекк каждому элементу из результата нужно добавить строку (например, «welcome судья»):

  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>      
);
}

Iполучил только одно сообщение (а не мой список) и предупреждение «отсутствует ключ для элемента»

Answer 1

Вы получите только одно сообщение, потому что ваши входные данные - это просто строка (преобразованная в массив 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 2

Поскольку ваш источник данных содержит одну строку.Здесь вы обновляете сообщение var на каждой итерации, поэтому в нем будет только последняя строка массива результатов с добавленным 'hello'.

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

}

Вы должны сделать что-то вродеthis

    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>      
);
}                

Answer 3

В вашем плоском списке должно быть keyExtractor={(x, i) => i.toString()}.

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

Вот определение FlatList keyExtractor.