如果 json 对象不为空，则呈现 Datatable 组件

Question

我是 React 的新手，所以请多多包涵。

我正在使用 react-data-table-组件来呈现数据table。我只想在用户提交表单并收集到查询我的后端所需的数据后才呈现它。

这是我的代码工作代码：

     const Table = ({ data }) => {
      const columns = [
        {
          name: 'Date',
          selector: (row) => row.created_at,
          format: (row) => moment(row.created_at).format(),
        }
    ]
        return <DataTable columns={columns} data={data} />;
        };
        
        export default Table;
        
        
        function App() {   
          const [someString, setSomeString] = useState('');
          const [startDate, setStartDate] = useState('');
          const [endDate, setEndDate] = useState('');
          const [data, setData] = useState({});
            const handleSubmit = (e) => {
            e.preventDefault();
            const dataSubmit = { someString, startDate, endDate };
            fetch('/table', {
              method: 'POST',
              headers: { 'content-type': 'application/json' },
              body: JSON.stringify(dataSubmit),
            })
              .then((res) => res.json())
              .then((data) => {
                setData(data);
              });
          };
          return (
    <div className='App'> <Table data={data} />   </div>
  );
}

export default App;

我只想在 data 的 useState 对象不为空时渲染我的 Table 组件，如果 data 不显示我的 table对象为空。我很难理解如何在代码中有条件地呈现。我知道我没有在我的代码中显示我的日期和表单组件，但希望这是足够的细节来解决这个问题。如果需要，我很乐意添加更多信息。任何帮助将不胜感激，谢谢。

Answer 1

我猜你可以简单地添加一个检查如下：

const Table = ({ data }) => {
      const columns = [
        {
          name: 'Date',
          selector: (row) => row.created_at,
          format: (row) => moment(row.created_at).format(),
        }
    ]
        return data && <DataTable columns={columns} data={data} />; //UPDATE THIS LINE
        };
        
        export default Table;

如果对象为空，您可以添加一个检查，例如 data && Object.keys(data).length !== 0。

希望你的数据不是空数组，否则你可以改成data && data.length>0 && <DataTable columns={columns} data={data} />;

如果 json 对象不为空，则呈现 Datatable 组件

render Datatable component if json object is not empty

reactjs

react-hooks

react-data-table-component