更新特定组件的道具

Question

我有一个充满房间的阵列：

const room = (<Room
    points={points}
    scene={this.scene}
    key={this.rooms.length}
    keyV={this.rooms.length}
    />)

this.rooms.push(room);

例如，我有3个房间，每个房间都有自己的初始点： 1号房间：积分= {a，b，c} 2号房间：积分= {d，e，f} 3号房间：积分= {g，h，i}

现在我想将房间2的点更新为{d，e，f，x}（this.points）。我知道这可以通过以下方式完成：

this.setState({points: this.points})

但这会更新所有房间的积分。我想只用新点更新2号房间。怎么能实现这一目标？

更新： 我绘制两条线时创建了一个房间。现在，当我绘制第三行时，现有房间需要额外增加一点。

Answer 1

当你setState，请确保您更新实际的房间。例如，当您创建Room组件时，您可以使用一些index或一些标识符来标识要更新的Room。

<Room points={...} onUpdate={()=>{this.onUpdate(someId)}} 

你的onUpdate fn可能就像

onUpdate(RoomIdToUpdate) {
  let updatedRooms = this.rooms.map((room) => {
    if(room.id === RoomIdToUpdate) {
      return Object.assign({}, room, {
        points: [...yourUpdatedPointsArray]
      })
    }
    return room;
  })
}

然后你可以set state

this.setState({
  rooms: updatedRooms
})

希望这可以帮助。

更新：

请查看以下示例以供参考。检查componentWillReceiveProps() fn和我的评论以便更好地理解

// componentWillReceiveProps will be called as Room component will receive new props.
class Room extends React.Component {
  componentWillReceiveProps(nextProps) {
    console.log(nextProps) //new props
    console.log(this.props) //old props
  }
  
  render() {
    return(
      <div>
         {this.props.data.roomNo}
         <button onClick={this.props.updateRoom}> Update Room</button>
      </div>
    )
  }
  
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      roomsData: [
        {
          points: [1,2],
          roomNo: 1
        },
        {
          points: [3,4],
          roomNo: 2
        },
        {
          points: [5,6],
          roomNo: 3
        }
      ]
    };
    this.updateRoom = this.updateRoom.bind(this);
  }
  
  updateRoom(roomNoToUpdate) {
    let newPoints = [2,3,4,5];
    let updatedRoomsData =  this.state.roomsData.map((data) => {
      if(data.roomNo === roomNoToUpdate) {
        return Object.assign({}, data, {
          points: [...newPoints]
        })
      } else {
        return data
      }
    })

    this.setState({ roomsData: updatedRoomsData });
  }


  render() {
    return (
      <div>
        {
          this.state.roomsData.map((data, index) => {
            return <Room key={index} data={data} 
                    updateRoom={() => this.updateRoom(data.roomNo)}
                  />
          })
        }
        
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>