Question

我有一个对象数组。我希望我的函数clicked（）向我的对象添加一个新参数（visible：false）。我不知道如何在没有重新创建整个对象数组的情况下告诉我更新特定键的状态。

首先，是否有一种有效的方法（即使用扩展运算符）？

其次，也许我的整个结构都没有了。我只是想点击我的元素，然后让它收到一个表明它不再可见的道具。如果需要，有人可以建议一种替代方法吗？

import React, { Component } from 'react';
import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import OilSite from './components/oilsite';
import './index.css';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      mySites: [
        {
          text: "Oil Site 1",
          secondaryText:"Fracking",
          key: 3
        },
        {
          text: "Oil Site 2",
          secondaryText:"Fracking",
          key: 88
        },
        {
          text: "Oil Site 3",
          secondaryText:"Fracking",
          key: 12
        },
        {
          text: "Oil Site 4",
          secondaryText:"Fracking",
          key: 9
        }
      ],
    }
  };

  clicked = (key) => {
    // HOW DO I DO THIS?
  }

  render = () => (
    <div className="wraper">
      <div className="oilsites">
          {this.state.mySites.map((x)=>(
            <OilSite {...x} onClick={()=>this.clicked(x.key)}/>
          ))}
      </div>
    </div>
  )
};

export default App;

Answer 1

像这样：

clicked = (key) => {
    this.state(prevState => {
      // find index of element
      const indexOfElement = prevState.mySites.findIndex(s => s.key === key);
      if(indexOfElement > -1) {
        // if element exists copy the array...
        const sitesCopy = [...prevState.mySites];
        // ...and update the object
        sitesCopy[indexOfElement].visible = false;
        return { mySites: sitesCopy }
      } 
      // there was no element with a given key so we don't update anything
    })
}

Answer 2

您可以使用数组的索引来执行O（1）（无需迭代）查找，从数组中获取站点，将属性添加到对象，更新阵列然后使用数组设置状态。记住，map有3个可以使用的参数（值，索引，数组）。

更新：修正了一些错别字

df1 = (student_df > 70).groupby(student_df['school'])['reading_score', 'reading_score2'].sum()

Answer 3

我不确定如何在没有重新创建整个对象数组的情况下告知对特定键更新状态的反应。

反应中的想法是返回一个新的状态对象，而不是改变旧的状态对象。

来自setstate上的反应文档，

prevState是对先前状态的引用。它不应该直接变异。相反，应该通过基于来自prevState和props
的输入构建新对象来表示更改

您可以使用map并返回一个新数组。

clicked = (key) => {
    this.setState({
        mySites: this.state.mySites.map(val=>{
             return val.key === key ? {...val, visibility: false} : val
        })
    })
  }

如何更新嵌套在数组中的特定对象的状态

3 个答案:

我不确定如何在没有重新创建整个对象数组的情况下告知对特定键更新状态的反应。