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

Question

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

首先，有没有一种有效的方法来做到这一点（即使用扩展运算符）？

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

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 个可以使用的参数（值、索引、数组）。

更新：修正了一些错别字

class Site
{
  constructor(text, scdText, key, visible=true)
  {
    this.text = text;
    this.secondaryText = scdText;
    this.key = key;
    this.isVisible = visible;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mySites: [
        new Site("Oil Site 1", "Fracking", 3),
        new Site("Oil Site 2", "Fracking", 88),
        new Site("Oil Site 3", "Fracking", 12),
        new Site("Oil Site 4", "Fracking", 9)
      ],
    }
    this.clicked = this.clicked.bind(this);
  };
  //Change to a normal function
  clicked(ind)
  {
  //Get the sites from state
    let stateCopy = {...this.state}
    let {mySites} = stateCopy;
    let oilSite = mySites[ind]; //Get site by index
    //Add property to site
    oilSite.isVisible = false;
    mySites[ind] = oilSite;//update array
    //Update the state
    this.setState(stateCopy);

  }

  render = () => (
    <div className="wraper">
      <div className="oilsites">
        {this.state.mySites.map((site, ind) => (
          //Add another parameter to map, index
          <OilSite {...site} onClick={() => this.clicked(ind)} />
        ))}
      </div>
    </div>
  )
};

Answer 3

我不知道如何告诉 react 在不重新创建整个对象数组的情况下更新特定键的状态。

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

来自 setstate 上的 react 文档，

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

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

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