Fatal编程技术网
  • reactjs/
  • Reactjs React：将Api数据传递给数组|未定义'；不可分配给类型'；GridRowsProp'；

Reactjs React：将Api数据传递给数组|未定义'；不可分配给类型'；GridRowsProp'；

reactjs typescript api

Reactjs React：将Api数据传递给数组|未定义'；不可分配给类型'；GridRowsProp'；,reactjs,typescript,api,react-hooks,syntax-error,Reactjs,Typescript,Api,React Hooks,Syntax Error,我试图通过使用map（）将数据从api传递到数组。原因是在带有行的选项卡中显示数据。我正在使用材质UI表 const array1 = data?.interface_here; const map2 = array1?.map(x => ({ id: x.id, customer_name: x.customer_name, appointment: x.appointment, amount: x.amount })); //This is how the data-grid wa

我试图通过使用map（）将数据从api传递到数组。原因是在带有行的选项卡中显示数据。我正在使用材质UI表

const array1 = data?.interface_here;

const map2 = array1?.map(x => ({ id: x.id, customer_name: x.customer_name, appointment: x.appointment, amount: x.amount }));

//This is how the data-grid wants me to do it
const rows = [
  { id: 1, customer_name: "y", appointment: '12:30', amount: 35 },
  { id: 2, customer_name: "w", appointment: '12:30', amount: 35 },
];

console.log(rows);

console.log(map2);
// {id: 30, customer_name: "Hello", appointment: "19.05.2021", amount: 650}

  return (
    <Body>
      <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={map2} columns={columns} pageSize={5} checkboxSelection />
    </div>

const array1=data？此处为接口；
const map2=array1？.map（x=>（{id:x.id，customer\u name:x.customer\u name，appointment:x.appointment，amount:x.amount}））；
//这就是数据网格希望我这样做的方式
常量行=[
{id:1，客户名称：“y”，预约时间：“12:30”，金额：35}，
{id:2，客户名称：“w”，预约时间：“12:30”，金额：35}，
];
console.log（行）；
console.log（map2）；
//{id:30，客户名称：“你好”，预约：“2021年5月19日”，金额：650}
返回(
但当我尝试将rows={rows}更改为rows={map2}时，我得到了错误： 类型“{id:number；customer_name:String；appointment:String；amount:number；}[]| undefined”不能分配给类型“GridRowsProp”。 类型“undefined”不可分配给类型“GridRowData[]”。TS2322

结果示例：

您正在使用可选链接延迟处理
array1
可能未定义的值。这意味着潜在的
未定义的
-ness将传递到
map2
，其类型签名将类似于：


{id:number；客户名称：string；约会：string；金额：number}[]|未定义



您需要将其默认为某个正常值（
map2？？？[]
），或告诉typescript您知道此值不会是未定义的：
map2！
。我通常不建议使用后者，因为编译器在抱怨此值时工作正常。
是否可以添加完整的示例？提供了带有console.log result的图像，并将代码更改为现在的状态。

const map2 = array1?.map(x => ({ id: x.id, customer_name: x.customer_name, appointment: x.appointment, amount: x.amount }));