如何将来自 React 组件的值插入到文本区域值中

Question

我试图在 textarea 值中插入一个组件的值，我从后端提取数据并在 GetAboutApp 组件中使用它，它在 <div> 等其他元素中工作正常或 <p> 例如，但是当在文本区域值属性中使用它时，它会给我 [object Object]

我的 GetAboutApp 组件代码：

import { useState, useEffect } from 'react';
import Axios from 'axios';

const GetAboutApp = () => {
  const [appDesc, setAppDesc] = useState('');

  useEffect(() => {
    const getAppDesc = async () => {
      const getAppDescUrl = 'http://dev.com:3001/getAppDesc';

      try {
        const response = await Axios.get(getAppDescUrl);
        setAppDesc(response.data);
      } catch (err) {
        console.error(err);
      }
    };
    getAppDesc();

    return () => setAppDesc(''); // cleanup: set the value to nothing
  }, []);

  return (
    <>
      {appDesc.DescRetrieved === 1
        ? appDesc.result[0].rest_app_about.length > DescLen
          ? appDesc.result[0].rest_app_about.slice(0, DescLen) + '...'
          : appDesc.result[0].rest_app_about
        : appDesc.message}
    </>
  );
};

export default GetAboutApp;

我的文本区域元素：

<textarea
                    name='aboutDescription'
                  id='aboutDescription'
                  defaultvalue={<GetAboutApp />}
                  minLength={MIN_DESC_LENGTH}
                  maxLength={MAX_DESC_LENGTH}
                  onChange={(e) => setAppDesc(e.target.value.trim())}
                  onKeyUp={(e) => {
                    const target = e.target.value.trim();

                    if (target.length > 0 && target.length < MIN_DESC_LENGTH) {
                      if (descErr)
                          descErr.textContent = `desc can't be less than ${MIN_DESC_LENGTH}`;
                      } else if (target.length > MAX_DESC_LENGTH) {
                        if (descErr)
                          descErr.textContent = `desc can't be more than ${MAX_DESC_LENGTH} character`;
                      } else {
                        if (descErr) descErr.textContent = '';
                      }
                    }}
                    required
                  ></textarea>

我的问题是如何在文本区域内呈现从组件返回的内容，或者是否有任何方法或技巧来实现这一点？

Answer 1

您需要在中添加值数据是可变的，它将包含来自 API.</p> 的传入文本区域数据 </section> <section class="answer"> <p>您想在单独的组件中执行此操作是否有原因？</p> <p>这不起作用的原因是你实际上需要一个字符串作为“默认值”但是你有一个反应组件（它是一个对象，这就是为什么它给你 [Object, Object ])</p> <p>您现在有两个选择。更简单但不太“好”的方法是在文本区域实际所在的组件的 useEffect 中直接调用 API。</p> <p>--> 然后你可以直接访问你的“getAccess”状态，这是一个字符串</p> <p>更漂亮的方法是编写自定义钩子。这是一个可让您直接访问状态的组件。您还可以在自定义挂钩中使用 useEffect。</p> <p>--> 同样在这里您可以直接访问您的状态变量。你把它“外包”了。</p> <p>您可以在此处阅读有关自定义挂钩的更多信息：<a href="https://reactjs.org/docs/hooks-custom.html" rel="nofollow noreferrer">React Custom Hooks</a></p> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>

如何将来自 React 组件的值插入到文本区域值中

How to insert a value from a React component into textarea value

components

jsx

reactjs