Question

我的状态硬编码是这样的菜单侧边栏，如何使用来自其他API的相同密钥更新值，我只想用相同的密钥更新值？

   this.state = {
  navList: [
    {
      name: 'Data Analytics', 
      child: []
    },
    {
      name: 'Nelayan', 
      child: []
    },
    {
      name: 'Transaksi', 
      child: [
        { 
          total:0
        },
        { 
          totalDeposit:0
        },
        { 
          InputDp:0
        },

        { 
          totalCollections:0
        },
        { 
          totalProductions:0
        },
        { 
          totalShippings:0
        },
        { 
          totalShippingsDelivered:0
        },
        { 
          InputPayment:0
        }
      ]
    }
  ], 
}

所以这是我的API，用于计算上面每个菜单的所有交易

 "data": {
        "totalDeposit": 0,
        "InputDp": 0,
        "totalCollections": 1,
        "totalProductions": 0,
        "totalShippings": 0,
        "totalShippingsDelivered": 0,
        "InputPayment": 12,
        "Supplier": 0,
        "Buyer": 0
    },

我可以用react js中的相同键更新值吗？

Answer 1

你可以这样做：

let navList = this.state.navList;
navList.map(item => {
  if (item.name === 'Nelayan') {
    item.child = // the data you want in array
  }
  return item;
});
this.setState({ navList })

首先，复制一份然后，您应该遍历数组中的每个项目并与要更改的数据进行比较，例如名为“Nelayan”的项目，然后更新内容并将其返回到数组。最后用新数组设置新状态。

注意：您需要一个唯一的标识符来执行此操作，并确保您只更新您想要执行此操作的项目。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      personas: [
        { id: 1, nombre: "Adolfo" },
        { id: 2, nombre: "Juan" }
      ]
    }
  }

  componentDidMount() {
    console.log("componentDidMount")
    let personas = this.state.personas
    personas.forEach(item => {
      if (item.id === 2) item.nombre = "Jose"
      return item
    })
    this.setState({ personas })
  }


  render() {
    console.log(this.state.personas)
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div className="App-intro">
          { 
            this.state.personas 
            ? this.state.personas.map((item, index) => {
              return <p key={index}>
                {this.state.personas[index].id} - {this.state.personas[index].nombre}
              </p>         
            })
            : ''
          }
        </div>
        {this.state.info ? this.state.info : 'No tengo info'}
      </div>
    );
  }
}

使用单个对象修改对象维数的数组

1 个答案: