Как изменить массив перед рендерингом - PullRequest
Новая
       8

Как изменить массив перед рендерингом

1 голос
/ 25 октября 2019

Я хотел бы изменить значение моего массива для отображения нового массива перед рендерингом. Я использую componentWillMount, чтобы сначала вызвать мою функцию. Моя функция изменяет массив в функции 

import recipeData from '../Helpers/RecipeData'

componentWillMount(){
    this._selectRicipe()
}

constructor(props) {
    super(props)
    this.state = {
        myRecipeData: recipeData
    }
}

_selectRicipe(){
    for (let i = 0; i < recipeData.length; i++) {
        for (let j = 0; j < this.props.listIngredients.length; j++) {
            if (this.props.listIngredients[j].name == recipeData[i].type) {
                newData = []
                console.log(this.props.listIngredients[j].name)
                newData = recipeData[i].name
                this.setState({ myRecipeData: newData })
                console.log("new RecipeData 1 : " + this.state.myRecipeData[i].name)
            }
        }
    }
}

render() {
    console.log("..New..recipe.. " + this.state.myRecipeData[0].name);
    return (
        <FlatList
            data={this.state.myRecipeData}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => <RecipeDesc recipeData={item} />}
        >
        </FlatList>
    )
}

В мой компонент RecipDesc ​​я получаю данные, фактически я могу получить значения первого неизмененного массива, который я пытался отправить в новый массив, так как другой просмотр с MaybeМне нужно использовать асинхронную операцию?

Спасибо

Ответы [ 2 ]

1 голос
/ 25 октября 2019

попробуйте .. 

 // put this in componentDidMount()
    this.state = {
            myRecipeData: recipeData,
            newData:[],          
        }

и в вашем _selectRicipe 

    _selectRicipe(){
            for (let i = 0; i < this.state.myRecipeData.length; i++) {
                for(let j = 0; j < this.props.listIngredients.length; j++){
                    if(this.props.listIngredients[j].name == recipeData[i].type){
                        console.log(this.props.listIngredients[j].name)
                        this.state.newData.push(recipeData[i].name);
                        console.log("new RecipeData 1 : "+this.state.myRecipeData[i].name)
                        }
                }
           }
// Outside of your for loop
     this.setState({
      newData:this.state.newData
    });
        }

и установите новые обновленные новые данные в вашем FlatList .. 

<FlatList
   data={this.state.newData}
   keyExtractor={(item,index) => index}
   renderItem={({item}) => <RecipeDesc
   recipeData={item}
  />}
 >
1 голос
/ 25 октября 2019

Я смотрю на ваш код, я нахожу вас setState в цикле, это повлияет на производительность вашего приложения. Я изменяю его, как показано ниже 

constructor(props) {
super(props)
this.state = {
    myRecipeData: recipeData
}
}  

//please do it in the componentDidMount
componDidMount() {
 this._selectRicipe()
}

_selectRicipe(){
let newData = [] // avoid to define a object in the loop repeately
for (let i = 0; i < recipeData.length; i++) {
    for(let j = 0; j < this.props.listIngredients.length; j++){
        if(this.props.listIngredients[j].name == recipeData[i].type){
            console.log(this.props.listIngredients[j].name)
            newData.push(recipeData[i].name)
             // the flatlist neeed data is arry and not loop to 
             //   setState
            // this.setState({ myRecipeData: newData }) 
            console.log("new RecipeData 1 : 
           "+this.state.myRecipeData[i].name)
            }
    }

}
this.setState ({myRecipeData: newData})}

...