TypeError: props.children.reduce is not a function

[evolution9502]

使用上遇到錯誤，估計可能是render那邊的問題，請問是否有解

TypeError: props.children.reduce is not a function getChildren http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:996:25 getColumnRenderValue http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:957:18 (anonymous function) http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1064:37 renderTbody http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1037:14 Excel.addDataSource http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1304:7 onClick .ant-design-pro/src/pages/Factory/index.jsx:114 111 | <Button type="primary" style={{ display: "inline"}} 112 | onClick={()=>{ 113 | const excel = new Excel();

114 | excel ^ 115 | .addSheet('test') 116 | .addColumns(columns) 117 | .addDataSource(factoryData)

原始碼:

const columns = [ { title: 'ID', dataIndex: 'id', key: 'id', render: (text) => {text}, }, { title: '名稱', dataIndex: 'name', key: 'name', render: (text) => {text}, }, { title: '電話', dataIndex: 'phone', key: 'phone', }, { title: '所在縣市', dataIndex: 'city', key: 'city', }, { title: '地址', dataIndex: 'address', key: 'address', }, { title: '標籤', key: 'tags', dataIndex: 'tags', render: tags => ( <> {tags.map(tag => { return (

{tag.name}

        );
      })}
    </>
  ),
},
{
  title: '管理',
  key: 'action',
  render: (text, record) => (
    <Space size="middle">
      <Link
        to={{pathname:"./Factory/Info",
            state:{fid:record.id}
            }} >編輯</Link>
    </Space>
  ),
},

];

function index(props) { const history = useHistory(); const [factoryData, setFactoryData] = useState([]);

const getFactoryData = async () => { await axiosRequest.get('/factories') .then((response)=>{ console.log("factory data : ", response.data.data); setFactoryData(response.data.data); }) .catch((error)=>{console.log("fetch factory data error : ", error)}); };

useEffect(()=>{ getFactoryData(); },[]);

return (

{ const excel = new Excel(); excel .addSheet('test') .addColumns(columns) .addDataSource(factoryData) .saveAs('test.xlsx'); }}> 匯出

) } export default index;

=============

EddieUp commented 2 years ago

使用上遇到錯誤，估計可能是render那邊的問題，請問是否有解

TypeError: props.children.reduce is not a function getChildren http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:996:25 getColumnRenderValue http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:957:18 (anonymous function) http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1064:37 renderTbody http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1037:14 Excel.addDataSource http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1304:7 onClick .ant-design-pro/src/pages/Factory/index.jsx:114 111 | <Button type="primary" style={{ display: "inline"}} 112 | onClick={()=>{ 113 | const excel = new Excel();

114 | excel ^ 115 | .addSheet('test') 116 | .addColumns(columns) 117 | .addDataSource(factoryData)

原始碼:

const columns = [ { title: 'ID', dataIndex: 'id', key: 'id', render: (text) => {text}, }, { title: '名稱', dataIndex: 'name', key: 'name', render: (text) => {text}, }, { title: '電話', dataIndex: 'phone', key: 'phone', }, { title: '所在縣市', dataIndex: 'city', key: 'city', }, { title: '地址', dataIndex: 'address', key: 'address', }, { title: '標籤', key: 'tags', dataIndex: 'tags', render: tags => ( <> {tags.map(tag => { return ( {tag.name} ); })} </> ), }, { title: '管理', key: 'action', render: (text, record) => ( <Link to={{pathname:"./Factory/Info", state:{fid:record.id} }} >編輯 ), }, ];

function index(props) { const history = useHistory(); const [factoryData, setFactoryData] = useState([]);

const getFactoryData = async () => { await axiosRequest.get('/factories') .then((response)=>{ console.log("factory data : ", response.data.data); setFactoryData(response.data.data); }) .catch((error)=>{console.log("fetch factory data error : ", error)}); };

useEffect(()=>{ getFactoryData(); },[]);

return ( <Button type="primary" style={{ display: "inline"}} onClick={()=>{ const excel = new Excel(); excel .addSheet('test') .addColumns(columns) .addDataSource(factoryData) .saveAs('test.xlsx'); }}> 匯出

) } export default index;

可以给个在线demo吗，codepen啥的

evolution9502 commented 2 years ago

使用上遇到錯誤，估計可能是render那邊的問題，請問是否有解 TypeError: props.children.reduce is not a function getChildren http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:996:25 getColumnRenderValue http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:957:18 (anonymous function) http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1064:37 renderTbody http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1037:14 Excel.addDataSource http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1304:7 onClick .ant-design-pro/src/pages/Factory/index.jsx:114 111 | <Button type="primary" style={{ display: "inline"}} 112 | onClick={()=>{ 113 | const excel = new Excel();

114 | excel ^ 115 | .addSheet('test') 116 | .addColumns(columns) 117 | .addDataSource(factoryData)

原始碼:

const columns = [ { title: 'ID', dataIndex: 'id', key: 'id', render: (text) => {text}, }, { title: '名稱', dataIndex: 'name', key: 'name', render: (text) => {text}, }, { title: '電話', dataIndex: 'phone', key: 'phone', }, { title: '所在縣市', dataIndex: 'city', key: 'city', }, { title: '地址', dataIndex: 'address', key: 'address', }, { title: '標籤', key: 'tags', dataIndex: 'tags', render: tags => ( <> {tags.map(tag => { return ( {tag.name} ); })} </> ), }, { title: '管理', key: 'action', render: (text, record) => ( <Link to={{pathname:"./Factory/Info", state:{fid:record.id} }} >編輯 ), }, ]; function index(props) { const history = useHistory(); const [factoryData, setFactoryData] = useState([]); const getFactoryData = async () => { await axiosRequest.get('/factories') .then((response)=>{ console.log("factory data : ", response.data.data); setFactoryData(response.data.data); }) .catch((error)=>{console.log("fetch factory data error : ", error)}); }; useEffect(()=>{ getFactoryData(); },[]); return ( <Button type="primary" style={{ display: "inline"}} onClick={()=>{ const excel = new Excel(); excel .addSheet('test') .addColumns(columns) .addDataSource(factoryData) .saveAs('test.xlsx'); }}> 匯出

)

} export default index;

可以给个在线demo吗，codepen啥的

剛剛參考已closed的issue折騰出解法了， 原來是column中的render屬性若是有包含在特殊或多層標籤語法內的回傳值就會發生此錯誤 目前解法是在column中加上excelRender的屬性，重新指定該欄位要導出的值，避開原先render屬性裡面的複雜回傳值 不過希望作者可以在文檔中提及，畢竟這坑太容易踩到了

LouisMuriuki commented 1 year ago

getting this error any solution?

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[EddieUp]

使用上遇到錯誤，估計可能是render那邊的問題，請問是否有解

TypeError: props.children.reduce is not a function getChildren http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:996:25 getColumnRenderValue http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:957:18 (anonymous function) http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1064:37 renderTbody http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1037:14 Excel.addDataSource http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1304:7 onClick .ant-design-pro/src/pages/Factory/index.jsx:114 111 | <Button type="primary" style={{ display: "inline"}} 112 | onClick={()=>{ 113 | const excel = new Excel();

114 | excel ^ 115 | .addSheet('test') 116 | .addColumns(columns) 117 | .addDataSource(factoryData)

原始碼:

const columns = [ { title: 'ID', dataIndex: 'id', key: 'id', render: (text) => {text}, }, { title: '名稱', dataIndex: 'name', key: 'name', render: (text) => {text}, }, { title: '電話', dataIndex: 'phone', key: 'phone', }, { title: '所在縣市', dataIndex: 'city', key: 'city', }, { title: '地址', dataIndex: 'address', key: 'address', }, { title: '標籤', key: 'tags', dataIndex: 'tags', render: tags => ( <> {tags.map(tag => { return ( {tag.name} ); })} </> ), }, { title: '管理', key: 'action', render: (text, record) => ( <Link to={{pathname:"./Factory/Info", state:{fid:record.id} }} >編輯 ), }, ];

function index(props) { const history = useHistory(); const [factoryData, setFactoryData] = useState([]);

const getFactoryData = async () => { await axiosRequest.get('/factories') .then((response)=>{ console.log("factory data : ", response.data.data); setFactoryData(response.data.data); }) .catch((error)=>{console.log("fetch factory data error : ", error)}); };

useEffect(()=>{ getFactoryData(); },[]);

return ( <Button type="primary" style={{ display: "inline"}} onClick={()=>{ const excel = new Excel(); excel .addSheet('test') .addColumns(columns) .addDataSource(factoryData) .saveAs('test.xlsx'); }}> 匯出

) } export default index;

可以给个在线demo吗，codepen啥的

[evolution9502]

使用上遇到錯誤，估計可能是render那邊的問題，請問是否有解 TypeError: props.children.reduce is not a function getChildren http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:996:25 getColumnRenderValue http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:957:18 (anonymous function) http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1064:37 renderTbody http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1037:14 Excel.addDataSource http://localhost:8888/mf-dep_vendors-node_modules_antd-table-saveas-excel_dist_index_esm_js.f86f75ec.async.js:1304:7 onClick .ant-design-pro/src/pages/Factory/index.jsx:114 111 | <Button type="primary" style={{ display: "inline"}} 112 | onClick={()=>{ 113 | const excel = new Excel();

114 | excel ^ 115 | .addSheet('test') 116 | .addColumns(columns) 117 | .addDataSource(factoryData)

原始碼:

const columns = [ { title: 'ID', dataIndex: 'id', key: 'id', render: (text) => {text}, }, { title: '名稱', dataIndex: 'name', key: 'name', render: (text) => {text}, }, { title: '電話', dataIndex: 'phone', key: 'phone', }, { title: '所在縣市', dataIndex: 'city', key: 'city', }, { title: '地址', dataIndex: 'address', key: 'address', }, { title: '標籤', key: 'tags', dataIndex: 'tags', render: tags => ( <> {tags.map(tag => { return ( {tag.name} ); })} </> ), }, { title: '管理', key: 'action', render: (text, record) => ( <Link to={{pathname:"./Factory/Info", state:{fid:record.id} }} >編輯 ), }, ]; function index(props) { const history = useHistory(); const [factoryData, setFactoryData] = useState([]); const getFactoryData = async () => { await axiosRequest.get('/factories') .then((response)=>{ console.log("factory data : ", response.data.data); setFactoryData(response.data.data); }) .catch((error)=>{console.log("fetch factory data error : ", error)}); }; useEffect(()=>{ getFactoryData(); },[]); return ( <Button type="primary" style={{ display: "inline"}} onClick={()=>{ const excel = new Excel(); excel .addSheet('test') .addColumns(columns) .addDataSource(factoryData) .saveAs('test.xlsx'); }}> 匯出

)

} export default index;

可以给个在线demo吗，codepen啥的

剛剛參考已closed的issue折騰出解法了， 原來是column中的render屬性若是有包含在特殊或多層標籤語法內的回傳值就會發生此錯誤 目前解法是在column中加上excelRender的屬性，重新指定該欄位要導出的值，避開原先render屬性裡面的複雜回傳值 不過希望作者可以在文檔中提及，畢竟這坑太容易踩到了

[LouisMuriuki]

getting this error any solution?