Question

您好，我试图在单击按钮时更改状态，并且只有在状态更改后才运行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;

Answer 1

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

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

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

Answer 2

反应不支持状态或道具值的共享。因此，您应该使用以下任何一种方式

反应Redux
AsyncStorage

反应状态不变

2 个答案: