私のコードでsetStateの値を使用できないのはなぜですか？

Question

新しいアレイを作成しようとしていますが、console.logを使用してthis.state.allColorをチェックすると値が変更されていることがわかりますが、新しいアレイを作成する際にthis.state.allColorの値を使用すると、それは動作しません：

は

onValueChange = (e) => { 
    const allColor=e.target.value; 
    this.setState({allColor}) 
    const boxes = new Array(this.state.allColor).fill().map(this.randomColor,this) 
    this.setState({boxes}) 
}; 

これは、同様に

onValueChange = (e) => { 
    const allColor = e.target.value; 
    const boxes = new Array(this.setState({allColor})).fill().map(this.randomColor,this) 
    console.log(boxes) 
}; 

これはthis.state.allColoのいずれか

onValueChange = (e) => { 
    const allColor = e.target.value; 
    const allBoxes = this.setState({allColor}) 
    const boxes=new Array(allBoxes).fill().map(this.randomColor,this) 
    console.log(boxes) 
}; 

値は動作しません動作しません。 rはconsole.logを使用すると毎回正しく変更されますが、新しいArrayでその値を使用することはできません。

が、これは

onValueChange=(e) => { 
    const totalNumber = 4 
    const boxes=new Array(totalNumber).fill().map(this.randomColor,this) 
    this.setState({boxes}) 
}; 

Answer 1

setStateがasynchronous操作であるため、すぐにその最新の値にアクセスすることはできません動作します。

SETSTATE（）は常にすぐに部品

また

、あなたのコンポーネントでsetStateを呼び出すたび、あなたはそれに新しいrenderをトリガに更新されません。したがって、パフォーマンスの少しだけ節約するために、コンポーネントの状態を1回更新するほうがよいでしょう。

onValueChange= (e) => { 
    const allColor = parseInt(e.target.value, 10) 

    this.setState({ 
    allColor, 
    boxes: new Array(allColor).fill().map(this.randomColor,this) 
    }) 
};