反应状态不会改变答案

【问题标题】：React state does not change反应状态不会改变
【发布时间】：2019-03-27 22:48:36
【问题描述】：

您好，我正在尝试在单击按钮时更改状态，并且仅在状态更改时运行 createBattle() 但单击按钮后状态不会更改。

一开始我将状态设置为 false。该按钮位于 Form.js 中，带有事件 onClick={this.handleClick}。然后事件 handleClick 应该将状态设置为 true，当状态改变时，Battle.js 中的 createBattle() 应该渲染表格。

请告诉我我做错了什么？

谢谢

App.js

import React from "react";
import Titles from "./Components/Title";
import Form from "./Components/Form";
import Battle from "./Components/Battle";
import "./App.css";

class App extends React.Component{
  state = {
    startPosition : false
}
render(){
  return(
    <div>
      <header>
      <div className="meniu"></div>
      </header>
        <div className="wrapper">
          <div className="main">
            <div className="container">
                <div className="title-container">
                  <Titles />
                  <div className="info">
                     <Form startPosition={this.state.startPosition} />
                  </div>
                </div>
                <div className="form-container">
                    <Battle startPosition={this.state.startPosition}/>
                </div>
               </div>
          </div>
        </div>
      </div>
   );
}
};
export default App;

Battle.js

import React, {Component} from "react";
import Square from "./Square";

class Battle extends Component{
    constructor(){
        super();
    }
        createBattle = () => {
          let table=[];
            for (let i=1; i<=10; i++){
                let children = [];
                for (let j=1; j<=10; j++){
                    children.push(<Square />)
                }
                table.push(<div className="board-row">{children}</div>)
            }
            return table;
        }
    render(){

        console.log(this.props);
        return(
            <div className="center">
                {this.startPosition && this.props.createBattle()}
            </div>

        );
    }
}
export default Battle;

Form.js

import React from "react";

class Form extends React.Component{
    constructor(){
        super();
     }
    handleClick = () =>{
           this.setState({
               startPosition: true
            });
        };
    render(){
        console.log(this.props);
        return(
            <div>
                <button className="button" onClick={this.handleClick}>START</button>
            </div>
        );
    } 
};
export default Form;

【问题讨论】：

Form 的状态正在更新，但我不确定您为什么认为这会对 Battle 的状态产生任何影响。您将需要将此状态“提升”到一个共同的祖先，并将处理程序作为道具向下传递，如 React 文档中所述。 reactjs.org/docs/lifting-state-up.html

标签： javascript reactjs

【解决方案1】：

给定组件的state 和props 不会在其他组件之间共享。

如果您需要在组件之间进行通信，您通常有两种不同的选择：

将state 逻辑移动到一个公共父级，并将这个state 作为props 传递到子组件中（注意，您可能还需要传递一些函数以允许与子组件中的此父状态交互）
使用通用状态，使用 Redux 之类的框架（广泛用于复杂项目）

【讨论】：

【解决方案2】：

React 不支持共享状态或道具值。所以你应该使用以下任何一种

React Redux
异步存储

【讨论】：