Question

我不知道为什么，但是名为name的数组方法对我不起作用。我以前使用过map方法，始终可以正常工作...

我正在互联网上搜索某些东西，试图添加键或将值从jsx更改为普通文本，没有任何效果，我在回调函数中添加了一些console.log，它起作用了，看起来return语句不起作用工作

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {thingsToBuy}
                </ol>
                <AddBar />
            </div>
        )
    }

}

输出应为如下所示的React组件数组： [li ... / li，li ... / li，li ... / li]，现在它只是原始数组，控制台中没有任何错误。

Answer 1

您需要将映射结果存储在const中：

render() {
    const jsx = thingsToBuy.map((thing, i) => {
        console.log(thingsToBuy);
        return <li key={i}>{thing}</li>
    })

    return (
        <div>
            <ol>
                {jsx}
            </ol>
            <AddBar />
        </div>
    )
}

或隐式返回：

render() {


    return (
        <div>
            <ol>
                {thingsToBuy.map((thing, i) => {
                    console.log(thingsToBuy);
                    return <li key={i}>{thing}</li>
                 })}
            </ol>
            <AddBar />
        </div>
    )
}

Answer 2

您可以定义一个变量，也可以将地图放入返回的JSX中。现在，地图结果只是丢失了，因为它没有分配给任何东西。

    render() {

        return (
            <div>
                <ol>
                   {thingsToBuy.map((thing, i) => (<li key={i}>{thing}</li>))}
                </ol>
                <AddBar />
            </div>
        )
    }

或

    render() {
        const listThings = thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {listThings}
                </ol>
                <AddBar />
            </div>
        )
    }

}

Answer 3

将结果设置为变量，然后打印。这是一个常见的错误。

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        const list = thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {list}
                </ol>
                <AddBar />
            </div>
        )
    }

}

或直接将其放入JSX

...

class List extends React.Component {

    render() {    
        return (
            <div>
                <ol>
                    {thingsToBuy.map((thing, i) =>
                      <li key={i}>{thing}</li>
                    )}
                </ol>
                <AddBar />
            </div>
        )
    }

}

Answer 4

Map函数将给定数组中的每个元素应用提供的函数进行计算，并返回带有修改后元素的新数组。它不会更改在其上调用映射的原始数组。您没有将返回的数组分配给变量，因此map()内部计算的所有数据都丢失了。解决方案是将结果保存在变量中，然后在jsx中返回该变量。

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        let elements = thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {elements}
                </ol>
                <AddBar />
            </div>
        )
    }

}

Answer 5

任何方法只能返回一次，然后将不再执行。我建议这样做：

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        return (
            <div>
                <ol>
                  {
                    thingsToBuy.map((thing, i) => {
                      <li key={i}>{thing}</li>
                    })
                  }
                </ol>
                <AddBar />
            </div>
        )
    }
}

Answer 6

感谢帮助，我忘记了map方法返回一个新数组，而不是编辑旧数组。

thingsToBuy.map((thing, i) => {

应更改为：

thingsToBuy = thingsToBuy.map((thing, i) => {

如何修复JavaScript中无法使用的地图方法？

6 个答案: