線程問題更新React中第二級組件的狀態

Question

我的應用程序的一部分具有以下結構，我試圖類似棋盤遊戲。瓦片是一個對象{color1，color2，key}，HexTile是顯示瓦片的React組件。

class HexTile extends Component{ 
    constructor(props) { 
    super(props); 
    let { color1, color2, key } = props.tile; 
    let tile = [color1, color2]; 

    // Initialize hexagons with some color 
    const hexagons = GridGenerator.orientedRectangle(2, 1).map((hexagon, index) => { 
     return Object.assign({}, hexagon, { 
     color: tile[index], 
     tile: key 
     }); 
    }); 

    this.state = { 
     hexagons, 
     ... 
    }; 
    } 

    static propTypes = { 
    ..., 
    tile: PropTypes.object.isRequired, 
    ... 
    }; 

    render() { 
    const { hexagons } = this.state; 
    return (
     <Layout className="tile" size={{ x: 3, y: 3 }} flat={false} spacing={1.01} 
       origin={{ x: this.props.x, y: this.props.y }}> 
     { 
      hexagons.map((hex, i) => (
      <Hexagon 
       key={i} 
       ... 
       data={hex} 
      > 
      </Hexagon> 
     )) 
     } 
     </Layout> 
    ); 
    } 

TileList中是接收瓦片的列表作爲道具的成分，將其保存在其狀態並呈現每個圖塊：

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

    this.onDragEnd = this.onDragEnd.bind(this); 

    const { tiles } = props; 
    this.state = { 
     ..., 
     tiles: tiles    
    }; 
    } 

    render() { 
    const { tiles } = this.state; 
    return (
     <g> 
     { 
      tiles.map((tile, i) => (
      <HexTile key={i} 
        ... 
        tile={tile} 
        onDragEnd={this.onDragEnd} 
        ... 
      /> 
     )) 
     } 
     </g> 
    ); 
    } 

該應用程序的主要成分，這樣可以節省瓦片的列表在它的狀態並呈現TileList，並且當它已經被使用並更改爲新的Tile時它會更新。

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

    // Event where the tile list is updated, this is working 
    this.onDragEnd = this.onDragEnd.bind(this); 
    ... 
    const playerTiles = App.generateTiles(6); 

    this.state = { 
     ... 
     playerTiles, 
    }; 
    } 

    render() { 
    const { playerTiles, ... } = this.state; 

    return (
     <div className="app"> 
     <HexGrid width={1200} height={800} viewBox="-50 -30 50 100"> 
      ... 
      <TileList className={'tiles'} 
        tiles={playerTiles} 
        onDragEnd={this.onDragEnd} 
        ... 
      /> 
     </HexGrid> 
     ... 
     </div> 
    ); 
    } 

App和TileList中之間的狀態更新工作，但應該更新的HexTile瓷磚是一樣的開始，我不知道如何使它更新。我不包含生成更新的事件，因爲它包含其他功能，但如果需要，我會添加它。儘管如此，我認爲問題在於HexTiles的初始化，但我還沒有弄清楚如何解決它。

Answer 1

您需要使用新的道具數據更新六邊形。嘗試更新componentWillReceiveProps中的狀態：

componentWillReceiveProps(prevProps, nextProps){ 
    const { color1, color2, key } = nextProps.tile; 
    const tile = [color1, color2]; 
    // Initialize hexagons with some color 
    const hexagons = GridGenerator.orientedRectangle(2, 1).map((hexagon, index) => { 
     return Object.assign({}, hexagon, { 
     color: tile[index], 
     tile: key 
     }); 
    }); 

    this.state = { 
     hexagons, 
     ... 
    }; 
}