如何将 React 组件中的值插入到 textarea 值中

Question

我正在尝试在 textarea 值中插入组件的值，我正在从后端提取数据并在 GetAboutApp 组件中使用它，它在 <div> 或 <p> 等其他元素中运行良好例如，但是当在 textarea value 属性中使用它时，它给了我 [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

您是否有理由要在单独的组件中执行此操作？

这不起作用的原因是你实际上需要一个字符串作为“默认值”，但你有一个反应组件（它是一个对象，这就是它给你 [Object, Object] 的原因）

您现在有两个选择。更简单但不太“好”的方法是直接在您的文本区域实际所在的组件的 useEffect 中调用 API。

--> 然后你就可以直接访问你的“getAccess”状态，它是一个字符串

更漂亮的方法是编写自定义钩子。这是一个让您可以直接访问状态的组件。您还可以在自定义挂钩中使用 useEffect。

--> 同样在这里你可以直接访问你的状态变量。而且你已经把它“外包”在了钩子里。

您可以在此处阅读有关自定义挂钩的更多信息：React Custom Hooks

Answer 2

您需要在 中添加值 数据是可变的，它将从 API 传入 textarea 数据。