Question

我想更改数组的值以在渲染之前显示新数组。我首先使用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组件中我试图发送新数组，因为另一个视图也许我需要使用异步操作？

谢谢

Answer 1

我看一下您的代码，发现您处于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}）}

Answer 2

尝试一下。

 // 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中设置新的更新的newData。

<FlatList
   data={this.state.newData}
   keyExtractor={(item,index) => index}
   renderItem={({item}) => <RecipeDesc
   recipeData={item}
  />}
 >

如何在渲染之前修改数组

2 个答案: