前端渲染

 

1、有状态组件（Class） / 无状态组件（Function）

https://reactjs.org/docs/hooks-reference.html#usestate

https://www.jianshu.com/p/76901410645a

https://blog.csdn.net/sinat_17775997/article/details/94452956

无状态组件（Function）渲染：

不能获取到this

定义函数用箭头函数

有状态组件（Class）渲染时会出现：

ReactDom is not defined: 

ReactDOM.render(<App/>, mountNode);  改为  export default xxxxx;

本文采用无状态渲染，用的hooks是：  useEffect

无状态渲染格式：export default function TabTable(props) {

}

props的目的：接收父页面/组件传给子页面/组件的值；props必须要放在子页面/组件的入口处，要不然数据不能传递

父组件或页面：path为子页面链接，如需参数加在链接里，可以配置动态路由

import {browserHistory,useHistory} from 'react-router';

 history.push（{

             pathname: '/test/test-transmit?idSuit='+record.Tsuitname,

              state: { detailcase

                : res }

             } 

            );

子组件获取父组件的数据：

 const data2 = props.location.state.detailcase;

子组件/页面入口配置：

import React from 'react';
import TabTable from './components/TabTable';
import CustomBreadcrumb from '@/components/CustomBreadcrumb';

export default function test(props)
{
  console.log("ttdata2=", props);
   return (
    <div>
      <TabTable {...props}/>
      
    </div>
  );
}

组件和组件之间通过函数传值：

父组件：

  const getFormValuesss=(dataIndex, values)=>{ 函数体  }

 <EditDialog

              index={index}

              record={record}

              getFormValues={getFormValuesss}  //父函数

            />

子组件：

props.getFormValues(dataIndex, values);

2、定义需要的参数

const history = useHistory();
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [value, setValue] = useState();

  const fullScreen = true
  const [state, setState] = useState(
    {
      data: [],
    }
  );
const fullScreen = true

3、请求数据，可以参考飞冰文档

data push写这么复杂是因为后端接口定义的不规范，返回值里只有数据，没有属性名。。。。

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await service.get('http://localhost/select2').then(res => {
          console.log('res1=>', res);
         
          //console.log('res2=>',res.response.data);
          console.log('res4=>', res.length);
          const data = []
          const datas = []
          for (let i=0;i<res.length;i++){
            data.push(
              {
                idSuit:res[i][0],
                Tsuitname:res[i][1],
                Tname:res[i][2],
                Tdescriber:res[i][3],
                Tstate:res[i][4],
                Tresult:res[i][5],
                Tresultdes:res[i][6]
              }
            );
          }
          for (let i = 0; i < res.length; i++) {
           
            state.data.push(res[i][1]);
            
          }
 setLoading(false);
          //setData(res.result);
          setData(data);
          console.log('res=>', res.dataIndex);

        });

      } catch (err) {
        Message.error({
          title: '请求失败：' + err.toString(),
          duration: 1000,
          size: 'medium',
          align: 'cc cc'
        });
      }
    };
    fetchData();
  }, [])

4、前端渲染

const handleEdit =async(index,record)=>{
    console.log("value=",record.Tsuitname);
    const Tsuitname = {Tsuitname:record.Tsuitname};
    console.log("value=",Tsuitname);
    if(record.Tsuitname !== undefined){
      await service.post('http://localhost/select',JSON.stringify(Tsuitname), { headers: { 'Content-Type': 'application/json; charset=UTF-8' } }).then(
        res=>{
          console.log("valuew=",res);
          //setstate({detailcase:res}),
          console.log("detailcase=",res);
          //browserHistory.push('/demter/environment3');
          //windows.location.href='/demter/environment3'
           history.push(
             {
             
             pathname: '/test/test-transmit?idSuit='+record.Tsuitname,
             
                : res }
             } 
            );
            

            }
          );
        }
      
    }

  var testdata= state.datas;
  const name =Array.from(new Set(testdata)) ;
  console.log("testdata=",new Set(testdata));
  //console.log('res5=>', datas);
  const names=[];
  for (let i=0;i<name.length;i++){
    names.push(
      {
        
        Tsuitname: name[i],
       
      }
    );

  }
  console.log('res5=>', names);
  

const columns = [

    {
      title: '名称',
      dataIndex: 'Tsuitname',
   
      width: 350,
      //filters:{filters}, 
      //filterMode: 'multiple',

    },
{
      title: '操作',
      key: 'action',
      width: 20,
      render: (value, index, record) => {
        return (
          /*<span>
            <EditDialog
              index={index}
              record={record}

            />
            <DeleteBalloon
            />
            
          </span>*/
          <span>
          <Button onClick={() => handleEdit(index, record)} variant="contained">title</Button>
          
          
          </span>
        );
      },
    },
  ];

return (
      <div className="tab-table">
        <IceContainer>
          <Loading visible={loading} fullScreen={fullScreen}>
            <CustomTable
              dataSource={names}
              columns={columns}
              hasBorder={false}
              editable={
                {
                  onRowAdd:newData=> new Promise(resove=>{
                    setTimeout(()=>{
                      resolve();
                      setstate(
                        prevState=>{
                          const data=[...prevState.data];
                          data.push(newData);
                          return{...prevState,data};
                        }
                      );
                    },600

                    )
                  }
                    ),
                }
              }
            />
            
          </Loading>
        </IceContainer>
      </div>
    );
  }