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

Question

我是React的新手，所以请原谅我。

我使用react-data-table-component来呈现一个数据表。我想只在用户提交表单并收集了查询后端所需的数据之后才呈现它。

这是我的代码工作代码:

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对象为空则不显示我的表。我很难理解如何在代码的条件基础上渲染。我知道我没有在我的代码中显示我的日期和表单组件，但希望这是足够的细节来解决问题。如果需要的话，我很乐意提供更多的信息。如有任何帮助，我将不胜感激，谢谢。

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} />;