React：在地图函数中调用函数答案

【问题标题】：React: Calling a function inside a map functionReact：在地图函数中调用函数
【发布时间】：2018-04-01 22:22:13
【问题描述】：

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

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？

【问题讨论】：

标签： javascript reactjs loops

【解决方案1】：

您实际上并没有调用您的函数。你正在传递一个新函数。

改变

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

到：

{this.renderText(key)}

您在错误的位置修复了词法范围。您仍在使用 function 进行地图。

改变：

.map(function(key, index) {

到：

.map((key, index) => {

在编写 React 代码时，到处使用箭头函数。您需要使用function 关键字的情况非常少见。

【讨论】：

这很有帮助。谢谢。

【解决方案2】：

您不能从已经在主函数中的 map() 等异步函数中返回新语句。您必须在父函数中传递回调。试试这样的：

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);
      });
   }
}

现在您可以在渲染方法中调用 bigObject 的所有值，如下所示：

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

【讨论】：