Javascript 在React中将Axios数据映射到渲染外部

在将数据传递到return语句之前，我试图对来自Axios的数据调用.map（）。重点是我想使用MaterialUI表，它们的模式是构造行，然后在返回中映射行值。我不知道我做错了什么

useEffect(() => {
    axios
    .get (url,  {
      auth: {
        username: username,
        password: password
      }
    })
      .then(response => setData (response.data.result));

  }, [])


  function createData(id) {
    return {id}
  }

   const newArray = element => {
       data.map ({
        id: element.Id
       })
    return newArray
   }

    const rows = [
        createData(newArray.id)
    ]

    console.log(data)  //returns the correct array
    console.log(newArray.id)  //returns undefined
    console.log(rows) //returns id:undefined

  return (     
        <div>
          {rows.map(row => (
              <TableCell component="th" scope="row">
                {row.id}
              </TableCell>
          ))}
        </div>  
    )
}

useffect（（）=>{
axios
.get（url{
认证：{
用户名：用户名，
密码：密码
}
})
.then（response=>setData（response.data.result））；
}, [])
函数createData（id）{
返回{id}
}
const newArray=元素=>{
data.map({
id:element.id
})
返回新数组
}
常量行=[
createData（newArray.id）
]
console.log（data）//返回正确的数组
console.log（newArray.id）//返回未定义的
console.log（行）//返回id:undefined
报税表（
{rows.map（row=>(
{row.id}
))}
)
}

假设

response.data.result

（来自您的axios请求）是一个具有

Id

属性的对象数组，例如：

[
  { Id: 1, ... },
  { Id: 2, ... }
]

…那么也许这样的事情可以解决你的问题：

function Example(props) {
  const [ rows, setRows ] = useState([])

  useEffect(() => {
    axios
      .get(url, {
        auth: {
          username: username,
          password: password
        }
      })
      .then(response => {
        // Assuming "response.data.result" is an array here
        const data = response.data.result
        const ids = data.map(element => {
          return { id: element.Id }
        })
        setRows(ids)
      });

  }, [])

  return (     
    <div>
      {rows.map(row => (
        <TableCell component="th" scope="row">
          {row.id}
        </TableCell>
      ))}
    </div>  
  )
}

功能示例（道具）{
const[rows，setRows]=useState（[]）
useffect（（）=>{
axios
.get（url{
认证：{
用户名：用户名，
密码：密码
}
})
。然后（响应=>{
//假设“response.data.result”是一个数组
常量数据=response.data.result
const id=data.map（元素=>{
返回{id:element.id}
})
设置行（ID）
});
}, [])
报税表（
{rows.map（row=>(
{row.id}
))}
)
}

假设

response.data.result

（来自您的axios请求）是一个具有

Id

属性的对象数组，例如：

[
  { Id: 1, ... },
  { Id: 2, ... }
]

…那么也许这样的事情可以解决你的问题：

function Example(props) {
  const [ rows, setRows ] = useState([])

  useEffect(() => {
    axios
      .get(url, {
        auth: {
          username: username,
          password: password
        }
      })
      .then(response => {
        // Assuming "response.data.result" is an array here
        const data = response.data.result
        const ids = data.map(element => {
          return { id: element.Id }
        })
        setRows(ids)
      });

  }, [])

  return (     
    <div>
      {rows.map(row => (
        <TableCell component="th" scope="row">
          {row.id}
        </TableCell>
      ))}
    </div>  
  )
}

功能示例（道具）{
const[rows，setRows]=useState（[]）
useffect（（）=>{
axios
.get（url{
认证：{
用户名：用户名，
密码：密码
}
})
。然后（响应=>{
//假设“response.data.result”是一个数组
常量数据=response.data.result
const id=data.map（元素=>{
返回{id:element.id}
})
设置行（ID）
});
}, [])
报税表（
{rows.map（row=>(
{row.id}
))}
)
}

axios代码是异步执行的，您明白吗？您能用完整的组件进行更新吗？newArray是这里的一个函数。只需使用data.map并将其直接分配到newArray中。我想这应该可以解决问题了。你可以上传到codesandbox或者在JSFIDLE上创建一个FIDLE并发布链接，这样我们就可以看一看了吗？axios代码是异步执行的，你明白吗？你能用完整的组件更新吗？newArray是这里的一个函数。只需使用data.map并将其直接分配到newArray中。这应该可以解决问题了，我想你可以上传到codesandbox或者在JSFIDLE上创建一个FIDLE并发布链接，这样我们就可以看一看了吗？