Почему не работает реквизит?

Question

[sinevik]

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


class Model extends React.Component {
	constructor(props){
		super(props);
			this.state = {
				}
		}

	render() {
		console.log(this.props);
		let result = <p>{this.props[0]}</p>
		return (
		<div>
			{result}
		</div>
		)

	}

		
}

export default Model;

Компонент принимает реквизит с массивом

Вот даже в консоли выводит


Почему оно не выводи тег p c текстом, почему он пустой?

Answer 1

[Роман Александрович]

попробуйте вот так

render() {
    console.log(this.props);
    let result = this.props.mark[0]
    return (
    <div>
      <p>{result}</p>
    </div>
    )
  }

но лучше так

render() {
    console.log(this.props);
    let result = this.props.mark[0]
    return (
    <div>
{this.props.mark!==undefined && this.props.mark.length!==0
?
this.props.mark.map(
(el,ind)=><p>{el}</p>
)
:null
}
    </div>
    )
  }

Comments

[sinevik]

У меня наверно в корневом компоненте что то не то

[sinevik]

import React from "react";
import Model from "./model";


class Main extends React.Component {
	constructor(props){
		super(props);
			this.state = {
					WeatherObj:null,
					mark:[],
					stylecontainerinput:{
						display:"flex",
						flexDirection:"column"
					},
					stylelabel:{
						font: "15px Arial"
					},
					header:{
						font: "15px Arial"
					}
			}
		}
	
	change(e){
	let unit = e.target.value;
	let arr = this.state.mark;
	 if(e.currentTarget.checked === true){
	 	arr.push(unit);
	 	this.setState=({mark: arr});
	 }else{
	 	arr.splice(arr.indexOf(unit), 1);
	 	this.setState=({mark: arr});
	 }
	
	}

	
	render() {
		let result;
      	if(this.state.mark.length === 0){
      		result= <p>Привет</p>
      	}else{
      		result=<p>{this.state.mark[0]}</p>
      	}
      	 
      	return(
      	<div style={this.state.stylecontainerinput}>
      	<p style={this.state.header}>Выбрать марку</p>
      	<div>
      		<input id="bmw" value="bmw" type="checkbox" onClick={this.change.bind(this)}/>
      		<label style={this.state.stylelabel} htmlFor="bmw">BMW</label>
      	</div>
      	<div>
      		{result}
      	</div>
      	</div>
      	
      	)
   	
	

	}

}
export default Main;

[sinevik]

Просто застревает на привет и ничего не происходит.
Суть простая, нажимаем на чекбокс, оно добавляет в массив надпись BMW, отжимаем чекбокс оно удаляет. Почему то не работает

[Роман Александрович]

sinevik, а что оно должно делать?

[sinevik]

Ну когда мы добавили запись в массив, оно должно вывести тег с этой надписью

let result;
      	if(this.state.mark.length === 0){
      		result= <p>Привет</p>
      	}else{
      		result=<p>{this.state.mark[0]}</p>
      	}

А вот эти методом, мы добавляем и удаляем запись в массиве

change(e){
  let unit = e.target.value;
  let arr = this.state.mark;
   if(e.currentTarget.checked === true){
   	arr.push(unit);
   	this.setState=({mark: arr});
   }else{
   	arr.splice(arr.indexOf(unit), 1);
   	this.setState=({mark: arr});
   }
  
  }

[Роман Александрович]

sinevik,

change(e){
  let unit = e.target.value;
  let arr = this.state.mark;
   if(e.currentTarget.checked === true){
   	arr.push(unit);
   	this.setState=({mark: arr});
console.log("new ARRAY", this.state.mark) //
   }else{
   	arr.splice(arr.indexOf(unit), 1);
   	this.setState=({mark: arr});
   }
  
  }

покажите стейт после выделения

[sinevik]

[sinevik]

Когда ставлю галочку, выдает в консоль

[sinevik]

Ну почему оно не меняет Привет на BMW ну что за ерунда

[Роман Александрович]

sinevik,

render() {
    let result;
      
 
      	return(
      	<div style={this.state.stylecontainerinput}>
      	<p style={this.state.header}>Выбрать марку</p>
      	<div>
      		<input id="bmw" value="bmw" type="checkbox" onClick={this.change.bind(this)}/>
      		<label style={this.state.stylelabel} htmlFor="bmw">BMW</label>
      	</div>
      	<div>
      		{this.state.mark.length === 0?
      		<p>Привет</p>
      	:
      		<p>{this.state.mark[0]}</p>
      	}
      	</div>
      	</div>
      	
      	)
   	
  

  }

[sinevik]

Так вообще даже Привет пропал

[Роман Александрович]

sinevik,
привет наверно пропал из-за таво что mark не пустой стал

[sinevik]

Переделал, теперь опять просто Привет

[Роман Александрович]

sinevik, https://jsfiddle.net/reactjs/69z2wepo/
100% работает
this.setState=({mark: arr}); //не правильно
this.setState({mark: arr}); //правильно

[sinevik]

Роман Александрович, Не понял как между ними разница?

[Роман Александрович]

sinevik,

constructor(props){
      this.state = {
          mark:[],
      }
    }

это инициализация стейта

change(e){
   	this.setState({mark: arr});
  }

изменение стейта

[sinevik]

Так почему оно Привет не меняет?

[Роман Александрович]

sinevik, https://jsfiddle.net/reactjs/69z2wepo/
у меня все применяет

[sinevik]

О, скопировал строчку заработало. Вообще не понял. Чем она отличалась

[sinevik]

Может я уже с ума сошел