react中textarea怎么保存数据库数据并上传？

Question

因为一些需求需要写一个网页的输入框，所以选择的textarea，这时候需要从
数据库获得默认数据，但是没有value属性，用上虽然可以读取出来，但是不能编辑
，网上也没有类似的问题，html的倒是不少，可在下是个小白，看不懂（准确的说不是看不懂是不会转换理解（躺）），还有就是换行问题，上传就报错，正则表达式还没看懂 代码如下 求大佬指教，如果大佬可以详细一些，小弟感激不尽

import React, { Component,Fragment } from 'react';
import { connect } from 'dva';
import { Card, Table, Divider, Form, Input, Button, Modal, Icon, message, Select } from 'antd';
import { baseurl } from '../../common/config';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
const { TextArea } = Input;
const FormItem = Form.Item;

@connect(({ admin, loading }) => ({
  admin,
  loading: loading.effects['admin/teamLists'],
}))
@Form.create()
export default class Teams extends Component {
  // 默认加载
  componentDidMount() {
    this.renderSimpleForm();
  }

  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      maindata: [],
      teamLists: [],
      businessLists: [],
      visible: false,
    };
  }

  renderSimpleForm(pagination = '1', values = '') {
    const { dispatch } = this.props;
    const query = this.props.location.search;
    dispatch({
      type: 'robots/wordfgets',
      callback: response => {
        this.setState({
          dataSource: response,
        });
      },
    });
  }

  // wordfwriteClick = e =>{
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'robots/wordfwrite',
  //     callback: response => {
  //       if(response.status == "success"){
  //         message.success(response.msg);
  //       }else{
  //         message.success(response.msg);
  //       }
  //     },
  //   });

  // }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { dataSource } = this.state;
    console.log(dataSource);
    const mainSearch = (
      <div>
        <TextArea size="large" value={dataSource} autosize={{ minRows: 10}}/>
      </div>
    );
    const action = (
      <Fragment>
        <Button type="primary" onClick={this.wordfwriteClick} >更新</Button>
      </Fragment>
    );
    return (
      <PageHeaderLayout>
        {mainSearch}
        {action}
      </PageHeaderLayout>
    );
  }
}

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在React中，你可以使用useState和useEffect来管理状态，并且使用useCallback来处理函数组件。以下是一个简单的示例：

import React, { useState, useEffect, useCallback } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 获取数据的逻辑
  }, []);

  const fetchData = useCallback(async () => {
    try {
      const data = await fetch('https://your-api-url.com/data');
      const jsonData = await data.json();
      setData(jsonData);
    } catch (error) {
      console.error(error);
    }
  }, []);

  return (
    <div>
      {/* 使用fetchData方法来获取数据 */}
      <button onClick={() => fetchData()}>Fetch Data</button>

      {/* 如果有数据，则显示 */}
      {data.length > 0 && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

在这个例子中，我们首先定义了一个名为App的状态数组data。然后，我们在useEffect钩子中添加了一个依赖项来触发数据获取逻辑。

useCallback钩子用于捕获函数中的引用参数，这样你就可以在多个地方重复调用同一个函数而不会改变原始函数的实现。在这里，我们将fetchData函数包装在一个回调函数中，以便在需要时重复调用它。

最后，在组件的主体部分，我们使用map函数来遍历数组并将每个元素渲染为列表项。如果你的数据足够少以至于不需要多次渲染，那么这个方法可能并不适用。在这种情况下，你可以直接将数据作为列表渲染到页面上。