javascript - 每次映射每个元素时调用函数

Question

我试图调用一个函数作为 react native 映射每个元素。该函数随机确定渲染组件的属性，使得renderComponent中的每个组件都是不同的。 Item 是 renderComponent 占用的一个参数，i 也是如此。

旁注:我尝试过使用状态，但你不能循环状态并连续更改其值。

cont randomNumber =  Math.floor(Math.random() * 3);
class whatever extends Component {
  change() {
   const randomNumber = Math.floor(Math.random() * 3);
 }

   renderComponent() {
    if(randomNumber === 0) {
     // Some cool code to set a random properties to the component 
    } else if (randomNumber === 1) {
    // Same thing here and so on and so forth 
    }
 }
  render() {
   return this.props.data.map(this.change.bind(this), (item, i)=> {
     return ({this.renderComponent(item)});
   }
 }
}

但是当我尝试这个时，我只是得到一个空白，组件没有渲染，因为我认为项目作为参数没有传递

Answer 1

我认为您想要的是使用每次迭代中映射的项目来调用函数。重组你的函数使其更像

return this.props.data.map((item, i) => {
   this.renderComponent(item)
})

您的更改函数应该返回一个可以从 renderComponent 访问的值

随机数常量不能在其定义的范围之外访问。将随机数声明为可以变异的变量，或者声明为可以从 renderComponent 函数访问的状态对象中的键会很有用。基本上，你的三个功能应该是

change(){this.setState({randomNum: Math.floor(Math.random() * 3) })}

renderComponent(){this.state.randomNum === 0 ? "do something" : "do something else"}

return this.props.data.map((item, i) => {
this.change() //calling this function to keep changing the number held at the state
   this.renderComponent(item)
})

不要忘记初始化 randomNum 的状态 key