使用动态按钮文本填充按钮数组仅在一个按钮时有效

编程问答 2022-04-24

问题描述

我学习了 React 和 JavaScript，现在我遇到了这个问题

这是一个Codesandbox

事情是这样的：

在 FileEditor.jsx 的 CodesandBox 中：我这样模拟它：

// Mocking the tag list just to test it
const tagMock = ['11111']; // THIS WORKS WITH ONLY ONE ITEM
// Mocking the tag list just to test it
//const tagMock = ["11111","22222","33333"]; // THIS DOES NOT WORK WITH MULTIPLE ITEMS

tagMock 在第一个只有一个数组值的情况下有效。
不起作用的 tagMock 是具有 3 个值的那个。

（当您在沙箱中使用只有一个数组值的 tagMock 时，请更改为具有 3 个数组值的 tagMock 以查看错误）

如果您进一步查看 FileEditor.jsx，您会看到 tagMock 的用法如下：

        {tagMock.map((tag) => (
            <div className="tagInput">
              <button
                className="btn btn-warning btn-sm"
                disabled={false}
                key={tag}
                type="button"
                // onClick={() => remove(skill)}
              >
                <TagName tag={tag} />
              </button>
            </div>
          ))}

在这个地图循环中创建的每个按钮都有自己的 <TagName tag={tag} /> TagName 是一个连接到 Redux Store 的组件，在那里 它selected（使用reselect），存储tags，然后仅返回标签名称。

button 名称文本是这样动态设置的：

enter image description here

在上图中，设置了“name2”按钮文本。

问题是，如果超过 1 个这样的按钮，这将不起作用：

//const tagMock = ["11111","33333"]; // THIS DOES NOT WORK WITH MULTIPLE ITEMS

我得到的错误是 tagName.jsx 文件中的 name 没有防御。

为什么会这样？我知道这是某种形式的组件重复问题，即 map 循环无法按原样创建 tagName 组件，但我无法弄清楚。

解决方法

好的，我解决了，

错误：

state.global.tags.find(tag => tag.id > ownProps.tag);

正确：

state.global.tags.find(tag => tag.id === ownProps.tag);

javascriptreact-reduxreactjsreactjsreactjsreactjsreselectreselectreselect