在地图中反应 setState

如何解决在地图中反应 setState

我正在尝试将从我的数据库中获取的数据转换为状态~ 但它只捕获了我数据库中的最后一个数据。我想我没有正确使用反应钩子，它一直覆盖以前的状态，所以现在导致问题。我尝试了很多方法，但仍然无效。希望能在这里QQ找人帮我

这是我的代码

const [dataSource,setDataSource] = React.useState([]);
React.useEffect(() => {
    orders.map((data,i) =>
      setDataSource([
        ...dataSource,{
          key: i,id: helpers.leftPad(data.oid,6,0),name: data.cname,totalPrice: data.total_price === null ? 'No data' : data.total_price,orderDate: data.order_date,},])
    );
  },[]);

订单是来自后端的数据，看起来像

[...
...
744: {oid: 749,cid: 545,cname: "Jerry",order_date: "2018-09-04",…}
745: {oid: 750,cid: 546,cname: "Kevin",order_date: "2018-09-18",…}
...
...]

谢谢你们，这对我很有帮助！！

解决方法

您也可以执行此操作。

const [dataSource,setDataSource] = React.useState();
React.useEffect(() => {
    let ordersData = orders.map((data,i) =>
      retunr  {
          key: i,id: helpers.leftPad(data.oid,6,0),name: data.cname,totalPrice: data.total_price === null ? 'No data' : data.total_price,orderDate: data.order_date,},);
    setDataSource(ordersData)

  },[]);

,

在使用spread操作符的时候，我相信你使用了一个回调函数来获取现有的状态，像这样：

const [data,setData] = useState([]);
const newData = {message: "I am new data."};
setData((existingData) => [...existingData,newData]);

试试这个：

setDataSource((existingOrders) => [
    ...existingOrders,{
      key: i,])

,

如果您以这种形式使用 useState，那么您就可以访问您的状态的 prevState，并且您可以设置对象。

const [dataSource,setDataSource] = React.useState([]);
React.useEffect(() => {
    orders.map((data,i) =>
      setDataSource((prevState) => ([
        ...prevState,{
          key: i,]))
    );
  },[]);

或者你可以使用 Array.push 方法

const [dataSource,setDataSource] = React.useState([]);
React.useEffect(() => {
    let data = []
    orders.map((data,i) =>
      data.push(
        {
          key: i,}
    ));

  setDataSource(data)   
  },[]);

,

每次映射订单时，您的状态都会改变。最好定义一个数组并将项目推送到它。之后改变一次状态：

  const [dataSource,setDataSource] = React.useState([]);
  React.useEffect(() => {
    let array = [];
    orders.map((data,i) =>
      array.push(
        {
          key: i,})             
    );
    setDataSource(array)
    },[]);

,

您已经猜对了，您正在覆盖之前的状态。这是因为，您在 map 方法中使用了“setDataSource([])”。每次映射“数据”aaray 时，您都在使用“setDataSource([])”，因此您最终将“data”数组中的最后一个值设置为您的状态。 使用您的 map 函数创建一个新的所需数组，其中包含所有订单并在此设置状态之后。 它会是这样的。

const [dataSource,setDataSource] = React.useState([]);
    React.useEffect(() => {
        const newStateArray = [];
        orders.map((data,i) =>
            newStateArray.push({
            key: i,});

        );
        setDataSource(newStateArray);
  
     },[]);