如何在 React Components 中正确使用对象（即 Form.Control）

Question

我正在做一个项目，到目前为止，我的研究告诉我这段代码应该打印出我需要的文本，但它一直在打印“object [Object]”，我不完全确定为什么。 []()

我使用 map 函数迭代对象数组。每次点击“测试'appendLog'”时，它使用数组扩展语法在使用'setLogs'时添加新项目，'Form.Control'组件将'logs'作为值，然后使用'map'函数遍历所有日志并将它们打印到“textarea”（即 Form.Control 组件）中以执行此操作，但它每次只打印“object [Object]”。我可以通过 JSON.strigify(logs) 传递“日志”，但随后我必须做额外的工作来解析并使其更具可读性。我只想使用 logs 并使其更易于维护。

Answer 1

您可以在 Form.Control 之前使用 logs.map 并在值中使用相同的值。

           {logs.map((log) => (
          <Form.Control
            readOnly
            as={"textarea"}
            rows={"20"}
            value={`Msg: ${log.logtext} by ${log.initials}`}
          >
            <p key={log.id}>
              Msg: ${log.logtext} by {log.initials}
            </p>
          </Form.Control>
        ))}