Question

我有一个反应组件，如

class MyApp extends React.Component{
  constructor(props) {
    super(props);
     this.state = {
      data =[
        {key=0,name="abc",value="123"},
        {key=1,name="def",value="456"},
        {key=2,name="ghi",value="789"}
      ]
    }
  }

  renameArrayKeys = (key) => {
    this.setState(oldState => {
      return {
        data: oldState.data.map((item, index) => item.key= index + 1)
      }
    })
  }
  render() {     
    return(
      <button onClick={this.renameArrayKeys}> Click Me </button>
    )
  }
}

我想要的是最终状态数据应该如下：

data =[
    {key=1,name="abc",value="123"},
    {key=2,name="def",value="456"},
    {key=3,name="ghi",value="789"}
]

有人可以查看我的代码并告诉我这里有什么问题，因为我无法获得所需的数据。我的数组中键的值没有变化。

Answer 1

映射函数在修改后返回一个新对象，因此在映射函数中赋值是没有意义的（它返回赋值而不是修改后的对象）。这更像是一个javascript问题然后反应，因为唯一错误的是映射函数。

我修改了这部分并添加了一些见解。

data =[
        {key:0,name:"abc",value:"123"},
        {key:1,name:"def",value:"456"},
        {key:2,name:"ghi",value:"789"}
        ]
       
// This all evaluates to just the numbers since you are turning all the items into a javascript initialization command, which returns its value.
const yourOutput = data.map((item, index) => item.key = index + 1) 


// What you should do is make the mapping change just the specific key that you want
// There are many ways to do it, this is my way.
const output =  data.map((item,index)=>({...item,key:index+1}))

console.log(yourOutput)
console.log(output)

Answer 2

Array#map应返回一个对象，而不是键分配的结果。您可以使用Object#assign添加密钥，然后返回一个新对象。

    class MyApp extends React.Component {
      constructor(props) {
        super(props)

        this.state = {
          data: [
            {key: 0,name="abc",value="123"},
            {key: 1,name="def",value="456"},
            {key: 2,name="ghi",value="789"}
          ]
        }
      }

      renameArrayKeys = (key) => {
        this.setState(oldState => {
          return {
            // create a new item object with the new key
            data: oldState.data.map((item, index) => Object.assign({}, item,    {
              key: index + 1
            }))
          }
        })
      }
      render() {
        return (
            <button onClick={this.renameArrayKeys}> Click Me </button>
        )
      }
    }

Answer 3

简单方法

let updateData = [];
  this.state.data.map((item, index) => {
    updateData.push({
      key: item.key+1, name: item.name, value: item.value,
    });
  });

 this.setState({ data: updatedData });

Answer 4

您的地图（...）结构似乎错了！

map函数不是使用'='更改内容的地方。这只会返回一个数组，你应该为它分配整个对象。

试试这个：

class MyApp extends React.Component{
  constructor(props) {
    super(props);
     this.state = {
      data =[
        {key=0,name="abc",value="123"},
        {key=1,name="def",value="456"},
        {key=2,name="ghi",value="789"}
      ]
    }
    this.renameArrayKeys = this.renameArrayKeys.bind(this)
  }

  renameArrayKeys(key){
    this.setState(oldState => {
      oldState.data = oldState.data.map((item, index) => 
        { key: index+1, name = item.name, value = item.value }
      return oldState
    })
  }
  render() {     
    return(
      <button onClick={this.renameArrayKeys}> Click Me </button>
    )
  }
}

你可以使用es6样式进行对象和数组赋值：

oldState.data.map((item, index) => { ...item, key: index+1}

如何在React

4 个答案: