Блог

 import Header from './components/Header';
import Bio from './components/Bio';
import styled from 'styled-components';
import Photo from './components/Photo';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      name: "John Smith",
      job: "Noob Developer",
      email: "John@Smith.noob",
      university: "Harvard University",
      study: "Law",
      year: "2020",
      experience: ["Google","Facebook","Airbnb"],
      input: false,
    }

    this.switchShow = this.switchShow.bind(this);
  }

  switchShow () {
    this.setState( prevState => ({
      input: !prevState.input
    }))
    console.log(this.state.input)
  }

  render() {


    let {name,job,email,university,study,year,experience,input} = this.state

    return(
      <div className="App">
      <Header/>

      

      <FlexRowContainer>
      <EditButton onClick={this.switchShow}>Edit</EditButton>
      <Photo/>
      <Bio name={name} job={job} email={email} school={university} study={study} year={year} experience={experience} input={input}>
      </Bio>
      </FlexRowContainer>

    </div>
    )
  }
}


export default App;

const FlexRowContainer = styled.div`
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
`
const EditButton = styled.button`
float: right;
width: auto;
height: auto;
position: absolute;
border: transparent;`
  

Итак, я попытался изменить this.state.input, используя метод switchShow, и после изменения компонент не отображался, хотя, когда я console.log(this.state.input), он успешно меняется с false на true или при повторном нажатии снова меняется с true на false. Что-то не так?

Биокомпонент находится здесь

 import styled from 'styled-components'

class Bio extends Component {
    constructor(props) {
        super(props)

        this.state = {
            name: this.props.name,
            job: this.props.job,
            email: this.props.email,
            school: this.props.school,
            study: this.props.study,
            yearClass: this.props.year,
            experience: this.props.experience,
            input: this.props.input,
        };

    }

    render() {

        let {name,job,email,school,study,yearClass,experience,input} = this.state


        return (
            <div>
            <StyledBioContainer>
                <StyledSubtitle>Name</StyledSubtitle>
                { !input ? <StyledParagraph>{name}</StyledParagraph> : <input></input>}
                <StyledSubtitle>Job</StyledSubtitle>
                { !input ? <StyledParagraph>{job}</StyledParagraph> : <input></input>}
                <StyledSubtitle>Email</StyledSubtitle>
                { !input ? <StyledParagraph>{email}</StyledParagraph> : <input></input>}
                <StyledSubtitle>School</StyledSubtitle>
                { !input ? <StyledParagraph>{school}</StyledParagraph> : <input></input>}
                <StyledSubtitle>Title of Study</StyledSubtitle>
                { !input? <StyledParagraph>{study}</StyledParagraph> : <input></input>}
                <StyledSubtitle>Class</StyledSubtitle>
                { !input? <StyledParagraph>{yearClass}</StyledParagraph> : <input></input>}
                <StyledSubtitle>Experiences</StyledSubtitle>
                { !input? experience.map(experience => <StyledParagraph>{experience}</StyledParagraph>) : <input></input>}
            </StyledBioContainer>
            </div>
        )
    }
}

export default Bio;


const StyledBioContainer = styled.div`
display: flex;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
flex-direction: column;
width: 100%;
padding: 3rem;
color: black;
height: auto;
background-color: rgba(0,105,255,.05);
text-align: center;
border-radius: 3px;
margin-top: 1.5rem;
`

const StyledSubtitle = styled.h6`
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
margin-top: 10px;
margin-bottom: 0px;
color: gray;
`

const StyledParagraph = styled.p`
margin-top: 0.75rem;
margin-bottom: 5px;
font-size: 20px;
  

Проблема в том, что в компоненте Bio вы присваиваете реквизиты переменным состояния в конструкторе, а затем выполняете условную визуализацию состояния Bio. Когда components создается, он принимает реквизиты и присваивает их состоянию, но когда вы меняете реквизиты, конструктор больше никогда не вызывается.

Вы можете либо пропустить настройку состояния из props и использовать props в своем рендеринге, либо, если вы хотите использовать class component, вы можете вызвать componentDidUpdate и обновить свое состояние новыми реквизитами.

Вот рабочий пример с использованием реквизита вместо состояния для условного рендеринга в биокомпоненте

https://codesandbox.io/s/focused-rosalind-8rnih?file=/src/Bio.jsx

Проблема возникает из-за того, что ваш <Bio /> компонент не прослушивает изменения реквизита для обновления его внутреннего состояния.

Вы можете исправить это, добавив это в свой <Bio /> компонент:

 componentDidUpdate(prevProps) {
    if (this.props.input !== prevProps.input)
      this.setState({input: this.props.input})
}
  

Вот полный пример: https://stackblitz.com/edit/react-vums1a?file=src/App.js

Редактировать: не видел ответа @szczocik, пока я печатал свой, но вы также можете сделать has предложил и не использовать другое состояние в <Bio /> и вместо этого использовать props. Он достигнет того же результата, но вы потеряете локальное состояние <Bio /> , поэтому это действительно зависит от того, нужен ли он вам в первую очередь или нет.