javascript - react : Calling a function inside a map function

这是我正在使用的对象的基本布局(作为 Prop 传递给组件):

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() {
    return (
        <div className="container code-descriptor-div">
            {this.renderInfo()}
        </div>
    )
}

由于词法范围问题(“无法读取未定义的属性”导致未使用箭头函数)，当我调用 renderText 方法时，我正在使用箭头函数，但我知道根本没有调用该方法，因为控制台没有记录“Hello world”。

当我在 render() 方法中调用 renderText 方法时，它将正确呈现列表元素，但这样做不适用于我构建其他组件的方式。

有没有办法像我想要的那样遍历 textArray？

最佳答案

你实际上并不是在调用你的函数。你正在传递一个新函数。

改变

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

至:

{this.renderText(key)}

你在错误的地方修正了词法范围。您仍在使用 function 进行 map 处理。

改变:

.map(function(key, index) {

至:

.map((key, index) => {

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

关于javascript - react : Calling a function inside a map function，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46854299/