反应对象数组中的更改特定元素

Question

所以我有一个像这样的对象数组

当前，我正在遍历数组并显示所有item.clock分钟。现在单击，我想将显示更改为item.activeTeamAbbr，但仅针对该特定元素，当前它正在更新数组的每个元素。只是想知道最好的方法是使用for循环吗？我将在下面添加代码，非常感谢您的帮助。

class Bets extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items : [],
      showVid: false
    };
  }

  componentDidMount() {
    fetch('http://www.nfl.com/feeds-rs/bigPlayVideos/2018/REG/5.json')
      .then(response => response.json())
      .then(res => this.setState({items : res.bigPlays}))
   }


   showVideo(item){
    this.setState({showVid: true})
   }

   displayInfo(){
    let item = this.state.items.map((item, key) =>
    <li key={item.id}><button onClick={()=> this.showVideo(item)}> . 
    {item.clockMinutes}</button></li>
   );

   let displayInfo = this.state.items.map((item, key) =>
   <li key={item.id}>{item.activeTeamAbbr}</li>
  );

   if(this.state.showVid === false){
      return item
   }
      else return displayInfo
   }


  render() {
    return (
      <div>
        {this.displayInfo()}
      </div>
    );
  }
}

export default Bets;

Answer 1

您可以对数组中的每个元素使用一个showVid状态变量，而不必对每个项目使用单个class Bets extends React.Component { state = { items: [], showVid: false }; componentDidMount() { fetch("https://www.nfl.com/feeds-rs/bigPlayVideos/2018/REG/5.json") .then(response => response.json()) .then(res => this.setState({ items: res.bigPlays })); } showVideo = (index) => { this.setState(prevState => { const items = [...prevState.items]; items[index] = { ...items[index], showVid: !items[index].showVid }; return { items }; }); } render() { return ( <div> {this.state.items.map((item, index) => ( <li key={item.id}> {item.showVid ? ( item.activeTeamAbbr ) : ( <button onClick={() => this.showVideo(index)}> {item.clockMinutes} </button> )} </li> ))} </div> ); } } ReactDOM.render(<Bets />, document.getElementById("root"));状态变量，并在单击按钮时对其进行切换。

示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

[]

Answer 2

可以使用for循环，但是地图可能更干净。您需要跟踪要显示的项目，并在地图内部有条件地以一种或另一种方式进行渲染。

让我们做一个演练，以便我可以解释每一个细节。

在您的showVideo(item)方法中，您需要跟踪要显示的项目。首先将其ID存储在以下状态：

showVideo(item) {
  this.setState({ showVid: item.id });
}

您的displayInfo()方法将返回一个列表，并且对于每个项目，它将调用另一个函数来决定要呈现的内容：

displayInfo() {
  return this.state.items.map(item => (
    <li key={item.id}>
      {displayItem(item)}
    </li>
  ))
}

新的displayItem(item)函数将询问另一个函数是否选择了当前项目，并有条件地渲染一件事或另一件事：

const displayItem = item => {
  if (isSelected(item)) {
    return // render the activeTeamAbbr here
  }
  return // render the unselected state here, which is the button
}

新的isSelected(item)函数将项目ID与您存储在状态中的ID进行比较。可以定义如下：

const isSelected = item => this.state.showVid === item.id

如果要允许切换多个项目，而不是单个项目，则showVid状态变量将是一个存储每个项目状态的对象：

constructor(props) {
  super(props);

  this.state = {
    items: [],
    showVid: {} // this should be an object to store multiple ids
  };
}

showVideo(item) {
  this.setState({ showVid: { ...this.state.showVid, [item.id]: true}})
}

只需修改先前定义的isSelected函数即可支持showVid变量的新类型：

const isSelected = item => this.state.showVid[item.id]