javascript - setState 后组件未重新渲染

问题描述

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;`

所以我尝试使用 switchShow 方法更改 this.state.input 并且更改后组件没有呈现，即使当我 console.log(this.state.input) 它成功地从 false 更改为 true 或再次单击时它会更改再次从真到假。有什么不对的吗？

生物组件在这里

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;

标签： javascriptreactjs

javascript - setState 后组件未重新渲染

问题描述

解决方案

推荐阅读