Reactjs 编辑阵列后，在React中重新渲染子组件的阵列

我的数据处于父级组件状态，如下所示：

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

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

    this.state = {
      record={
        name="",
        timestamp="",
        data =[
          {key:0,name="abc",value="123"},
          {key:1,name="def",value="456"},
          {key:2,name="ghi",value="789"}
        ]
    }
    this.deleteFromStateArray=this.deleteFromStateArray.bind(this);
  }

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {
    return(
      {
        this.state.record.data.map((record,index) => 
          <Child key={record.key}
            id={record.key}
            onDelete={this.deleteFromStateArray} />
      }
    )
  }
}

this.setState(oldState => ({ 
    record: {
        ...oldState.record, 
        { 
            data: oldState.record.data.filter(item => item.key !== key)
        }
    }
});

在我的react组件中，我在父组件的返回部分调用子组件作为列表，如下所示

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

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {

  return(
    {
      this.state.data.map((record,index) => 
             <Child key={record.key}
              id={record.key}
              name={record.name}
              value={record.value}
              onDelete={this.deleteFromStateArray} />
    }
  )
  }

MyApp类扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 记录={ name=“”， 时间戳=”， 资料=[ {key:0，name=“abc”，value=“123”}， {key:1，name=“def”，value=“456”}， {key:2，name=“ghi”，value=“789”} ] } this.deleteFromStateArray=this.deleteFromStateArray.bind（this）； } deleteFromStateArray（键）{ 让oldData=[…this.state.record.data]； 设newData=[]； oldData.map（函数（记录，i）{ if（record.key！=key）{ newData.push（记录）； } }) newData.map（函数（记录，i）{ newData[i].key=i+1 }) this.setState（{record:Object.assign（{}，this.state.record，{data:newData}），}）； } render（）{ 返回( { this.state.data.map（（记录，索引）=> } ) } 我在子组件中调用onDelete（），如下所示

\\我正在将id初始化为子构造函数中处于状态的键

我的问题是，当我在子类中调用onDelete时，我能够在函数中正确删除key=1的obj，但是重新渲染没有正确发生

我的意思是，状态设置正确，数据1中只有两个项，键为0，另一个项为键为2。但我在GUI中看到的是两个子组件，键为0，第二个为键为1，当前不在状态数据中

有人能帮我正确地重新呈现数据吗

我还想在setState中从数组中删除后更改键的顺序

---

我不确定这是否真的对您有效，但是

deleteFromStateArray

的函数声明在

render

函数中

我认为您的组件应该如下所示：

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

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

    this.state = {
      record={
        name="",
        timestamp="",
        data =[
          {key:0,name="abc",value="123"},
          {key:1,name="def",value="456"},
          {key:2,name="ghi",value="789"}
        ]
    }
    this.deleteFromStateArray=this.deleteFromStateArray.bind(this);
  }

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {
    return(
      {
        this.state.record.data.map((record,index) => 
          <Child key={record.key}
            id={record.key}
            onDelete={this.deleteFromStateArray} />
      }
    )
  }
}

this.setState(oldState => ({ 
    record: {
        ...oldState.record, 
        { 
            data: oldState.record.data.filter(item => item.key !== key)
        }
    }
});

MyApp类扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 记录={ name=“”， 时间戳=”， 资料=[ {key:0，name=“abc”，value=“123”}， {key:1，name=“def”，value=“456”}， {key:2，name=“ghi”，value=“789”} ] } this.deleteFromStateArray=this.deleteFromStateArray.bind（this）； } deleteFromStateArray（键）{ 让oldData=[…this.state.record.data]； 设newData=[]； oldData.map（函数（记录，i）{ if（record.key！=key）{ newData.push（记录）； } }) newData.map（函数（记录，i）{ newData[i].key=i+1 }) this.setState（{record:Object.assign（{}，this.state.record，{data:newData}），}）； } render（）{ 返回( { this.state.record.data.map（（记录，索引）=> } ) } }

---

React使用

键

确定集合中的元素是否需要重新呈现。键应唯一且恒定。在方法中，您正在更改记录的

键

属性，这可能会导致所述错误

此外，您还可以使用以下简单的

filter

调用替换所有代码：

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

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

    this.state = {
      record={
        name="",
        timestamp="",
        data =[
          {key:0,name="abc",value="123"},
          {key:1,name="def",value="456"},
          {key:2,name="ghi",value="789"}
        ]
    }
    this.deleteFromStateArray=this.deleteFromStateArray.bind(this);
  }

  deleteFromStateArray(key){
    let oldData = [...this.state.record.data];
    let newData= [];
    oldData.map(function (record, i) {
      if (record.key != key) {
        newData.push(record);
      }
    })
    newData.map(function (record, i) {
      newData[i].key = i + 1
    })
    this.setState({ record: Object.assign({}, this.state.record, { data: newData }), });
  }
  render() {
    return(
      {
        this.state.record.data.map((record,index) => 
          <Child key={record.key}
            id={record.key}
            onDelete={this.deleteFromStateArray} />
      }
    )
  }
}

this.setState(oldState => ({ 
    record: {
        ...oldState.record, 
        { 
            data: oldState.record.data.filter(item => item.key !== key)
        }
    }
});

还值得一提的是，您应该尽可能保持

状态

，以简化所需的逻辑。在您的情况下，删除

记录

，并按以下方式保留它是一个好主意：

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

---

我的缺点是实现方式只是这样。我将在我的问题中更正我的问题。但问题仍然是相同的。您删除数据的方式一定有问题。如果您可以添加这段代码，那么我可以进一步帮助您。当然，1分钟。我添加了相同的内容，但使用react-chrome extn，我确信逻辑工作正常在删除后可以看到数据数组处于状态。这是什么语法。我对reactok不熟悉，可以获取有关它正在执行的操作的详细信息吗？因此，我没有像您那样通过“映射”和

推送创建新数组，而是使用了
过滤器
；然后我稍微修改了
设置状态
，以确保它在当前状态下工作-详细信息这里：这种语法设置状态只在JS文件中有效吗（我的是JSX），因为我在visual studio代码中遇到了错误，如预期的
[JS]属性分配。