如何在表内显示获取数据

Question

如何在此处获取 react-native 表中的数据？ 当我尝试获取数据时，该表显示为空，此代码显示为空，因此从 API 获取数据并以本机反应显示在表中的位置和操作。

getData() {
  fetch('https://www.lampmonitor.com/lampmonitor/api/auth/web/lampControls?projectId=595&pageSize=50')
    .then(responce => responce.json())
    .then(data => {
      this.setState({ 
        tableData: data
      });
    });
}

render() {
  const state = this.state;
  const { tableData } = state;

  return (
    <View style={styles.container}>
      <ScrollView horizontal={true}>
        <View>
          <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
            <Row
              data={state.tableHead}
              widthArr={state.widthArr}
              style={styles.header}
              textStyle={styles.text}
            />
          </Table>
          <ScrollView style={styles.dataWrapper}>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              {tableData.map((rowData, index) => (
                <Rows
                  key={index}
                  data={rowData}
                  widthArr={state.widthArr}
                   style={[
                     styles.row,
                     index % 2 && {backgroundColor: '#F7F6E7'},
                   ]}
                  textStyle={styles.text}
                />
              ))}
            </Table>
          </ScrollView>
        </View>
      </ScrollView>
    
    </View>
  );
}

Answer 1

这是一个如何使用 React 挂钩的示例。 https://reactjs.org/docs/hooks-state.html

您有很多错误，我认为您需要重新了解 Class 组件和使用 React Hooks 的功能组件之间的差异。

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default TableComponent;

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

const TableComponent = () => {

  const [tableData, setTableData] = useState({});

  useEffect(() => {
    async function getData() {
      fetch('https://www.lampmonitor.com/lampmonitor/api/auth/web/lampControls?projectId=595&pageSize=50')
      .then(responce => responce.json())
      .then(data => {
        setTableData({data});
      });
    }

    getData();
}, []);

  return (
    <View style={styles.container}>
      <ScrollView horizontal={true}>
        <View>
          <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
            <Row
              data={tableData.tableHead}
              widthArr={tableData.widthArr}
              style={styles.header}
              textStyle={styles.text}
            />
          </Table>
          <ScrollView style={styles.dataWrapper}>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              {tableData.map((rowData, index) => (
                <Rows
                  key={index}
                  data={rowData}
                  widthArr={tableData.widthArr}
                   style={[
                     styles.row,
                     index % 2 && {backgroundColor: '#F7F6E7'},
                   ]}
                  textStyle={styles.text}
                />
              ))}
            </Table>
          </ScrollView>
        </View>
      </ScrollView>
    
    </View>
  );
}