Question

我想创建一个简单的函数，将数组对象的索引转换为字母，然后在我的react组件中呈现它。然而我遇到了一个问题我的代码是：

 class StringList extends Component {
  state = {
    strings: ['String1', 'String2', 'String3', 'String4', ]
  }

  numToChar =i=> {
    return (i >= 26 ? this.numToChar((i / 26 >> 0) - 1) : '') + 'abcdefghijklmnopqrstuvwxyz'[i % 26 >> 0];
  }

  render(){
    return(
      <div> 
        {this.state.strings.map((string, index) => (
            <p>
            {index}, 
            {this.numToChar({index})},
            {this.numToChar(5)}
            //Do other Stuff
          </p>
        ))}
      </div>
    )
  }
}

我希望结果是：
0，a，f
1，b，f
2，c，f
3，d，f
...
然而这实际上会回归：
0，a，f
1，a，f
2，a，f
3，a，f
...
它正在递增索引，但不是当我用它来调用我的方法时。这是因为这个过程是异步的吗？如果是这样，我如何在react render组件方法中使用await或promise？或者，我应该采取另一种方式做出反应吗？我很陌生，所以任何额外的信息都有帮助。

Answer 1

React中的Render方法假设是纯粹的，你应该在它之外进行异步工作。无论如何，你的问题不需要这个。

以下是解决方案的链接。 https://codesandbox.io/s/jv4w87z7vv

而不是编写用于将整数映射到字符的复杂方法，你可以简单地使用String.fromCharCode(97 + n)

此外，您将索引作为对象this.numToChar({index})传递相反，它只是一个变量this.numToChar(index)

从Array.map调用方法React

1 个答案: