javascript - react 无限循环

Question

我是 React 新手，对我的英语感到抱歉。

当我将数据从子组件传递到父组件并单击另一个按钮时，它不会呈现。

正如您在我的评论中看到的，setState 创建了一个无限循环，停止更新值的选项。

我尝试了不同的方法来解决在构造函数内部创建变量(例如 this.name = '' 和 this.selected = [])的问题，并将回调设置为this.name = name 和 this.selected = selected 但当我单击其他选项时不会呈现。

我尝试过使用 componentDidMount() 和其他生命周期方法，但我不知道如何解决它。

App.js(父组件)

state = { name: '', selected: [] };

doParentControl = (name, selected) => {
   console.log('doParentControl name: ',name);
   console.log('doParentControl selected: ',selected);
   // this.setState({ name: name, selected: selected }) --> infinite loop
}

render() {
   console.log('-> render App')
   return (
    <div className="App">
      <header className="App-header">
        <h1>Map</h1>
       </header>
       <div className="Map">
         <Navbar parentControl={this.doParentControl}/>
         <MapComponent name={this.state.name} selected={this.state.selected}/>
       </div>
       <div className="clearfix" />
   </div>
   );
}

Navbar.js(子组件)

constructor(props) {
    super(props);
    this.selected = [false, false, false];
    this.state = { name: 'tile' };
}

handleClick = (e) => {
    this.setState({name: e.target.value});
}

handleChange = (e) => {
    switch(e.target.value) {
        case 'option1': {
            this.setState({ selected: this.selected[0] = e.target.checked})
            break;
        }
        case 'option2': {
            this.setState({ selected: this.selected[1] = e.target.checked})        
            break;
        }
        case 'option3': {
            this.setState({ selected: this.selected[2] = e.target.checked})        
            break;
        }
        default:
            break;
    }
}

doParentControlFromChild = () => {
    this.props.parentControl(this.state.name, this.selected);
}

render() {
    console.log('render Navbar ->')
    return (
        <div className="nav-bar">
            <nav className="App-nav">
                <div className="buttons">
                    <button name="tile"        onClick={this.handleClick} value="tile">Tile</button>
                    <button name="tile-watercolor" onClick={this.handleClick} value="tile-watercolor">Tile WaterColor</button>
                    <button name="cartografia" onClick={this.handleClick} value="cartografia">Cartografía</button>
                    <button name="satelite"    onClick={this.handleClick} value="satelite">Satélite</button>
                    <button name="mapa"        onClick={this.handleClick} value="mapa">Mapa</button>
                </div>
                <div className="clearfix"></div>
            </nav>
            <div className="checkbox">
                <label><input type="checkbox" name="option1" value="option1"  onChange={this.handleChange} />Option 1</label>
                <label><input type="checkbox" name="option2" value="option2"   onChange={this.handleChange} />Option 2</label>
                <label><input type="checkbox" name="option3" value="option3"      onChange={this.handleChange} />Option 3</label>
            </div>
            <div className="clearfix" />
            { this.doParentControlFromChild() }
        </div>
    );
}

Answer 1

setState() 让 render() 函数重新渲染。
因此，在父组件中部署在 doParentControl 处的 setState() 会导致组件重新渲染，而在子组件中，return( ... { this.doParentControlFromChild( )} ... ) 只是伴随着元素渲染。这会导致您的父组件再次调用 doParentControl，因此这里出现了无限循环。
就像之前的回答所说，您需要让 doParentControlFromChild 仅在需要时才被调用。

App.js (Father)
...
state = { name: '', selected: [] };

doParentControl = (name, selected) => {
   console.log('doParentControl name: ',name);
   console.log('doParentControl selected: ',selected);
   this.setState({ name: name, selected: selected })
}

render() {
   console.log('-> render App')
   return (
    <div className="App">
      <header className="App-header">
        <h1>Map</h1>
       </header>
       <div className="Map">
         <Navbar parentControl={this.doParentControl}/>
         <MapComponent name={this.state.name} selected={this.state.selected}/>
       </div>
       <div className="clearfix" />
   </div>
   );
}
...

Navbar.js (Child)
...

constructor(props) {
    super(props);
    this.selected = [false, false, false];
    this.state = { name: 'tile' };
}

handleClick = (e) => {
    this.setState({name: e.target.value});
}

handleChange = (e) => {

     let index = e.target.value.match(/\d/); // fetch the idx
     this.setState({ selected: this.selected[index] = e.target.checked}, () => {  
        this.doParentControlFromChild()
     })

}

doParentControlFromChild = () => {
    this.props.parentControl(this.state.name, this.selected);
}

render() {
    console.log('render Navbar ->')
    return (
        <div className="nav-bar">
            <nav className="App-nav">
                <div className="buttons">
                    <button name="tile"        onClick={this.handleClick} value="tile">Tile</button>
                    <button name="tile-watercolor" onClick={this.handleClick} value="tile-watercolor">Tile WaterColor</button>
                    <button name="cartografia" onClick={this.handleClick} value="cartografia">Cartografía</button>
                    <button name="satelite"    onClick={this.handleClick} value="satelite">Satélite</button>
                    <button name="mapa"        onClick={this.handleClick} value="mapa">Mapa</button>
                </div>
                <div className="clearfix"></div>
            </nav>
            <div className="checkbox">
                <label><input type="checkbox" name="option1" value="option1"  onChange={this.handleChange} />Option 1</label>
                <label><input type="checkbox" name="option2" value="option2"   onChange={this.handleChange} />Option 2</label>
                <label><input type="checkbox" name="option3" value="option3"      onChange={this.handleChange} />Option 3</label>
            </div>
            <div className="clearfix" />
        </div>
    );
}