Question

这是我正在使用的对象的基本布局（作为道具传递给组件）：

bigObject {
    overview: {
        *not being used for current concern*
    },
    code: {
        1: {
            textArray: [*array of length 4 to 8*],
            imgSrc: "string goes here"
        },
        2: {
            textArray: [*array of length 4 to 8*],
            imgSrc: "string goes here"
        },
        3: {
            textArray: [*array of length 4 to 8*],
            imgSrc: "string goes here"
        },
    }
}

我的构造函数：

constructor(props) {
    super(props);
    this.state = {
        projectName: this.props.projectName,
        info: bigObject[this.props.projectName]
    }
    this.renderInfo = this.renderInfo.bind(this);
    this.renderText = this.renderText.bind(this);

    console.log(this.state.info);
}

我正在尝试的是迭代代码对象，以便对于每个imgSrc，迭代对象中的文本数组以在照片旁边创建列表元素。

renderInfo() {
    return Object.keys(this.state.info.code).map(function(key, index) {
        return (
            <div className="code-snippet" id={name + key} key={key}>
                <div className="code-description">
                    <ul>
                        {() => this.renderText(key)}
                    </ul>
                </div>
                <div className="code-img">
                    <img src={"/project-images/MongoScraper/" + placeholder[key].img} alt=""/>
                </div>
            </div>
        )
    });
}

每个img都是我想要的，但renderText方法并没有像我想要的那样迭代textArray：

renderText(key) {
    console.log("hello world") //doesn't log
    let placeholder = this.state.info.code;
    return placeholder[key].text.map(function(keyValue, index) {
        return (
            <li>{placeholder[key].text[index]}</li>
        )
    });
}

render（）方法：

render() {
    return (
        <div className="container code-descriptor-div">
            {this.renderInfo()}
        </div>
    )
}

我在调用renderText方法时使用了箭头函数，因为词法范围问题（“不能读取未定义的属性”导致不使用箭头函数），但我知道该方法根本没有被调用因为控制台没有记录“Hello world”。

当我在render（）方法中调用renderText方法时，它会正确地呈现列表元素，但这样做不能解决我构建其他组件的方式。

有没有办法像我想要的那样迭代textArray？

Answer 1

你实际上并没有调用你的功能。你传递了一个新功能。

更改

{() => this.renderText(key)}

为：

{this.renderText(key)}

你正在修复错误的词汇范围。您仍然使用function作为地图。

变化：

.map(function(key, index) {

为：

.map((key, index) => {

编写React代码时，请在任何地方使用箭头函数。在需要使用function关键字的情况下，这种情况非常罕见。

Answer 2

你不能从async函数中返回一个新语句，例如map（）已经在你的main函数中。您必须在父函数中传递回调。尝试这样的事情：

function foo(callback){
  const bigObject = [{
        textArray: [*array of length 4 to 8*],
        imgSrc: "string goes here"
   }, {
        textArray: [*array of length 4 to 8*],
        imgSrc: "string goes here"
   }];
   if(bigObject.length>0){
      bigObject.map((obj)=>{
        callback(obj);
      });
   }
}

现在你可以在render方法中调用bigObject的所有值，如下所示：

render(){
  return (
    <div>
      {this.foo(e){ console.log(e.textArray); }}
    </div>
  )
}

React：在map函数中调用一个函数

2 个答案: