Question

我正在通过数组进行映射，并且正在使用输入的值来显示对象文本，如下所示：

<i class="fab fa-facebook"></i>

现在，我想在用户单击输入时更改特定的对象文本，因此我为输入创建了onChange函数：

        {items.map((item) => {
                return (
                    <div key={item.text}>
                        <input value={item.text} type="text" />
                    </div>
                );
            })}

然后在set函数中获取值，我想将对象的文本更改为用户输入的新值：

<input onChange={(e) => set(e.target.value)} value={item.text} type="text" />

但是它引发了一个错误：

    const set = (value) => {
        items.map((item) => {
            if (item.text === value) {
                item.text === value;
            }
            return null;
        });
        console.log(value);
    };

我还想它不会更新该对象的值。

那么在映射整个数组时我如何正确地在输入字段中更新对象的文本呢？

Answer 1

在设置方法中，您将使用比较而不是分配

#include <iostream>
using namespace std;


class Random {
public:
    double oldRoot;
    double newRoot;
    int iteNum;

    Random(double aOldRoot, double aNewRoot, int aIteNum) {
        oldRoot = aOldRoot;
        newRoot = aNewRoot;
        iteNum = aIteNum;
    }

    int count = 0;

    while (count <= iteNum) {
        double totalRoot;
        totalRoot = oldRoot + newRoot;
        if totalRoot > 1.0{
            oldRoot = newRoot;
            newRoot = totalRoot - 1.0;
        }
        else {
            oldRoot = newRoot;
            newRoot = totalRoot;
        }
        cout << oldRoot << endl;
        cout << newRoot << endl;

        count += 1
    }

};

int main() {

    Random random10(0.1412, 0.2343, 10);

    return 0;

}

这应该更新您的物品对象

  item.text === value;

Answer 2

React中的表单输入被称为controlled components，并且在文档中有一些很棒的例子应该可以帮助我们弄清诸如此类的问题。还有大量的表单库，可以减轻管理表单状态的痛苦。

这里另一个重要的细节是array.map返回一个新数组，而不是就地修改数组。因此，您的set函数将需要return一个具有所需更新的新数组，理想情况下，您将使用React的内置工具（例如useState或{{1 }}）更新您的setState列表。这是我想出的最小的例子来说明。我在这里做出一些假设，即您的items数组在某处处于React状态，并且您的items数组是一个简单的对象数组，可能只有items和{{1 }}字段。

id

通过对象数组映射时如何更新对象的值？

2 个答案: