Рендеринг дополнительных компонентов React при нажатии кнопки

Question

Я работаю над проектом и пытаюсь использовать React для рендеринга некоторых компонентов, когда я нажимаю кнопку. Я новичок в React и JavaScript, поэтому это немного сбивает с толку. Когда нажимается кнопка, я устанавливаю состояние компонента, но он не перерисовывается. Мой код:

import React, {PureComponent} from "react";
import {render} from "react-dom";

let websocket = new WebSocket("ws://localhost:8081");
let scenarios = [];

    
websocket.onopen = function(){
    console.log("Frontend client connected");
    websocket.send("Get all scenarios available");
}

websocket.onmessage = function(event){
    const receivedMessage = event.data;
    
    if(receivedMessage.includes("Available scenarios")){
        scenarios = receivedMessage.split("/");
        console.log(scenarios);
    }
}

class App extends PureComponent{
    state = {
        scenariosReceived: false
    };

    handeStartClick = () => {
        this.setState({
            scenariosReceived : true
        })
    };

  
    render()
    {
    
        return(
            <div id="container">
                <button onClick={this.handeStartClick.bind(this)}>Start</button>
                {this.scenariosReceived? (
                <ol className="scenarios_list">
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[1]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[2]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[3]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[4]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[5]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[6]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[7]}</button></li>
                </ol>
                ) :(console.log("No scenarios received"))
                }
            </div>
        );
    }
}

Любые идеи помогут. Спасибо большое!

Answer 1

{this.scenariosReceived? (

Здесь вы не берете значение из состояния, исправление:

{this.state.scenariosReceived? (

Answer 2

у вас может быть состояние, которое содержит массив объектов, которые идентифицируют этот компонент React, и одним щелчком мыши вы можете добавить еще один объект в этот массив.

Я предоставлю ниже код, который у меня есть реализован для рендеринга компонента при нажатии кнопки в response-native

const [mediaRows, setMediaRow] = useState([
    // here I have a default compont so I have one object by default
    {id: 1, imgUri: '', moreInfo: ''},
]);
// this is the function that executed when the button clicked
const addMediaRow = () => {
  const lastId = mediaRows.length;
  setMediaRow([...mediaRows, {id: lastId + 1, imgUri: ''}]);
};

, а JSX ниже перерисовывается, когда этот массив изменяет изменение

{mediaRows.map((media) => {
      return (
        <View
          key={media.id}
          style={[
            styles.mediaMediaContainer,
            {backgroundColor: colors.primary},
          ]}>
          <Avatar
            onPress={() => uploadImage(media.id)}
            source={
              media.imgUri
                ? {
                    uri: media.imgUri,
                  }
                : undefined
            }
            rounded
            size="medium"
            containerStyle={{
              backgroundColor: colors.backgroundDegree,
              marginRight: 10,
            }}
            icon={{
              name: 'photo-camera',
              size: 24,
              color: Colors.white,
            }}
          />
          <Input
            placeholder="Type More Information"
            overrideStyles={[
              styles.inputOverrideStyles,
              {backgroundColor: colors.mediaInput},
            ]}
          />
        </View>
      );

logi c между реагировать и реагировать-native - вам просто нужно знать идею и изменить этот JSX, счастливого кодирования братан