Fatal编程技术网
  • reactjs/
  • Reactjs 反应子组件不在其上重新渲染状态更改

Reactjs 反应子组件不在其上重新渲染状态更改

reactjs ecmascript-6

Reactjs 反应子组件不在其上重新渲染状态更改,reactjs,ecmascript-6,jsx,axios,rerender,Reactjs,Ecmascript 6,Jsx,Axios,Rerender,我有一个任务组件，它返回其他组件。但是，当我从Tasks组件更改子组件之一的状态时，它不会重新渲染 我将“newTaskAdded”状态作为道具从父级传递给子级，并将其分配给子级状态，以便重新渲染子组件，但它仍然没有发生 我的目标是： 当用户添加任务时，我希望它立即显示在屏幕上，这意味着用户必须刷新页面才能看到新任务 Tasks.jsx： import React , { Component } from 'react' import axios from 'axios' import Name

我有一个任务组件，它返回其他组件。但是，当我从Tasks组件更改子组件之一的状态时，它不会重新渲染

我将“newTaskAdded”状态作为道具从父级传递给子级，并将其分配给子级状态，以便重新渲染子组件，但它仍然没有发生

我的目标是： 当用户添加任务时，我希望它立即显示在屏幕上，这意味着用户必须刷新页面才能看到新任务

Tasks.jsx：

import React , { Component } from 'react'
import axios from 'axios'
import Name from './Name.jsx'
import ShowTasks from './ShowTasks.jsx'

class Tasks extends Component {
  constructor(props) {
    super(props)
    this.state={
      task: '',
      newTaskAdded:false,
      newTask:[],
    }
    this.handleChange = this.handleChange.bind(this)
    this.addTask = this.addTask.bind(this)
  }
  handleChange(event) {
    this.setState({task: event.target.value})
  }
  addTask() {
    axios.post('/api/addtask',{
      name:this.props.name,
      task:this.state.task
    })
    .then((res) => {
      if(res.status=='200'){
        this.setState ({task:''})
        this.setState ({newTaskAdded:true})
        this.setState ({newTask: res.data.message[res.data.message.length-1] })
      }
    })
    .catch((err) => {
      if(err) throw err
    })
  }

  render() {
    return (
      <div>
        <div>
          <Name name={this.props.name} />
        </div>
        <div>
          <input value={this.state.task} onChange={this.handleChange} type="text" name="task" />
          <button type="button" onClick={this.addTask}>Add Task</button>
        </div>
        <ShowTasks name={this.props.name} updated={this.state.newTaskAdded} />
      </div>
    )
  }
}

export default Tasks

import React , { Component } from 'react'
import axios from 'axios'
import Completed from './Completed.jsx'
import NotCompleted from './NotCompleted.jsx'

class ShowTasks extends Component {
  constructor(props) {
    super(props)
    this.state = {
      user: this.props.user,
      tasks:[],
    }
    this.loadTasks=this.loadTasks.bind(this)
  }

  loadTasks() {
    axios.post('/api/loadtasks', {
      name: this.state.user.name
    })
    .then((res) => {
      this.setState ({tasks:res.data.tasks})
    })
    .catch((err) => {
      throw err
    })
  }

  componentWillReceiveProps(nextProps) {
    this.loadTasks()
  }

  render() {
    return (
      <div className='pointer'>
        {this.state.tasks.map((task) => {
          if(task.completed) {
            return <Completed key={task._id} {...task} />
          }
          else {
            return <NotCompleted key={task._id} {...task} />
          }
        })}
      </div>
    )
  }
}

export default ShowTasks

import React，{Component}来自“React”
从“axios”导入axios
从“./Name.jsx”导入名称
从“./ShowTasks.jsx”导入ShowTasks
类任务扩展组件{
建造师（道具）{
超级（道具）
这个州={
任务：“”，
纽塔斯卡德：错，
新任务：[]，
}
this.handleChange=this.handleChange.bind（this）
this.addTask=this.addTask.bind（this）
}
手变（活动）{
this.setState（{task:event.target.value}）
}
addTask（）{
axios.post（“/api/addtask”{
名称：this.props.name，
任务：this.state.task
})
。然后（（res）=>{
如果（res.status='200'）{
this.setState（{task:'}）
this.setState（{newTaskAdded:true}）
this.setState（{newTask:res.data.message[res.data.message.length-1]}）
}
})
.catch（（错误）=>{
如果（错误）抛出错误
})
}
render（）{
返回(
添加任务
)
}
}
导出默认任务
ShowTasks.jsx

import React , { Component } from 'react'
import axios from 'axios'
import Completed from './Completed.jsx'
import NotCompleted from './NotCompleted.jsx'

class ShowTasks extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tasks:[],
      updated:this.props.updated
    }
  }
  componentWillMount(){
    axios.post('/api/loadtasks', {
      name: this.props.name
    })
    .then((res) => {
      console.log('res', res);
      this.setState ({tasks:res.data.tasks})
    })
    .catch((err) => {
      throw err
    })
  }
  render() {
    return (
      <div className='pointer'>
        {this.state.tasks.map((task) => {
          if(task.completed) {
            return <Completed key={task._id} {...task} />
          }
          else {
            return <NotCompleted key={task._id} {...task} />
          }
        })}
      </div>
    )
  }
}

export default ShowTasks

import React，{Component}来自“React”
从“axios”导入axios
已从“/Completed.jsx”导入完成
从“./NotCompleted.jsx”导入NotCompleted
类ShowTasks扩展组件{
建造师（道具）{
超级（道具）
此.state={
任务：[]，
更新：this.props.updated
}
}
组件willmount（）{
axios.post（“/api/loadtasks”{
名称：this.props.name
})
。然后（（res）=>{
console.log（'res'，res）；
this.setState（{tasks:res.data.tasks}）
})
.catch（（错误）=>{
失误
})
}
render（）{
返回(
{this.state.tasks.map（（task）=>{
如果（任务已完成）{
返回
}
否则{
返回
}
})}
)
}
}
导出默认显示任务
所以问题出在您的子函数中，您将道具设置为state

您正在将props设置为构造函数中的state，并且不会在每次props更改时调用constructor，而只是在组件第一次呈现时调用，因此状态不会使用正确的值进行更新

您应该在componentWillReceiveProps函数中设置道具，该函数在父组件的每次渲染中调用

class ShowTasks extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tasks:[],
      updated:this.props.updated
    }
  }
  componentWillReceiveProps(nextProps) {
      this.setState({updated: nextProps.updated});
  }
  componentWillMount(){
    axios.post('/api/loadtasks', {
      name: this.props.name
    })
    .then((res) => {
      console.log('res', res);
      this.setState ({tasks:res.data.tasks})
    })
    .catch((err) => {
      throw err
    })
  }
  render() {
    return (
      <div className='pointer'>
        {this.state.tasks.map((task) => {
          if(task.completed) {
            return <Completed key={task._id} {...task} />
          }
          else {
            return <NotCompleted key={task._id} {...task} />
          }
        })}
      </div>
    )
  }
}

export default ShowTasks

类ShowTasks扩展组件{
建造师（道具）{
超级（道具）
此.state={
任务：[]，
更新：this.props.updated
}
}
组件将接收道具（下一步）{
this.setState（{updated:nextrops.updated}）；
}
组件willmount（）{
axios.post（“/api/loadtasks”{
名称：this.props.name
})
。然后（（res）=>{
console.log（'res'，res）；
this.setState（{tasks:res.data.tasks}）
})
.catch（（错误）=>{
失误
})
}
render（）{
返回(
{this.state.tasks.map（（task）=>{
如果（任务已完成）{
返回
}
否则{
返回
}
})}
)
}
}
导出默认显示任务
阅读更多有关生命周期功能以及何时使用它们的信息

好！已解决：

Tasks.jsx：

import React , { Component } from 'react'
import axios from 'axios'
import Name from './Name.jsx'
import ShowTasks from './ShowTasks.jsx'

class Tasks extends Component {
  constructor(props) {
    super(props)
    this.state={
      user:this.props.user,
      task:'',
      newTask:[],
    }
    this.handleChange = this.handleChange.bind(this)
    this.addTask = this.addTask.bind(this)
  }

  handleChange(event) {
    this.setState({task: event.target.value})
  }

  addTask() {
    axios.post('/api/addtask',{
      name:this.state.user.name,
      task:this.state.task
    })
    .then((res) => {
      if(res.status=='200'){
        this.setState ({user:this.state.user})
        this.setState ({newTask: res.data.message[res.data.message.length-1] })
      }
    })
    .catch((err) => {
      if(err) throw err
    })
  }

  render() {
    return (
      <div>
        <div>
          <Name name={this.props.user.name} />
        </div>
        <div>
          <input value={this.state.task} onChange={this.handleChange} type="text" name="task" />
          <button type="button" onClick={this.addTask}>Add Task</button>
        </div>
        <ShowTasks user={this.state.user}/>
      </div>
    )
  }
}

export default Tasks

import React，{Component}来自“React”
从“axios”导入axios
从“./Name.jsx”导入名称
从“./ShowTasks.jsx”导入ShowTasks
类任务扩展组件{
建造师（道具）{
超级（道具）
这个州={
用户：this.props.user，
任务：“”，
新任务：[]，
}
this.handleChange=this.handleChange.bind（this）
this.addTask=this.addTask.bind（this）
}
手变（活动）{
this.setState（{task:event.target.value}）
}
addTask（）{
axios.post（“/api/addtask”{
名称：this.state.user.name，
任务：this.state.task
})
。然后（（res）=>{
如果（res.status='200'）{
this.setState（{user:this.state.user}）
this.setState（{newTask:res.data.message[res.data.message.length-1]}）
}
})
.catch（（错误）=>{
如果（错误）抛出错误
})
}
render（）{
返回(
添加任务
)
}
}
导出默认任务
ShowTasks.jsx：

import React , { Component } from 'react'
import axios from 'axios'
import Name from './Name.jsx'
import ShowTasks from './ShowTasks.jsx'

class Tasks extends Component {
  constructor(props) {
    super(props)
    this.state={
      task: '',
      newTaskAdded:false,
      newTask:[],
    }
    this.handleChange = this.handleChange.bind(this)
    this.addTask = this.addTask.bind(this)
  }
  handleChange(event) {
    this.setState({task: event.target.value})
  }
  addTask() {
    axios.post('/api/addtask',{
      name:this.props.name,
      task:this.state.task
    })
    .then((res) => {
      if(res.status=='200'){
        this.setState ({task:''})
        this.setState ({newTaskAdded:true})
        this.setState ({newTask: res.data.message[res.data.message.length-1] })
      }
    })
    .catch((err) => {
      if(err) throw err
    })
  }

  render() {
    return (
      <div>
        <div>
          <Name name={this.props.name} />
        </div>
        <div>
          <input value={this.state.task} onChange={this.handleChange} type="text" name="task" />
          <button type="button" onClick={this.addTask}>Add Task</button>
        </div>
        <ShowTasks name={this.props.name} updated={this.state.newTaskAdded} />
      </div>
    )
  }
}

export default Tasks

import React , { Component } from 'react'
import axios from 'axios'
import Completed from './Completed.jsx'
import NotCompleted from './NotCompleted.jsx'

class ShowTasks extends Component {
  constructor(props) {
    super(props)
    this.state = {
      user: this.props.user,
      tasks:[],
    }
    this.loadTasks=this.loadTasks.bind(this)
  }

  loadTasks() {
    axios.post('/api/loadtasks', {
      name: this.state.user.name
    })
    .then((res) => {
      this.setState ({tasks:res.data.tasks})
    })
    .catch((err) => {
      throw err
    })
  }

  componentWillReceiveProps(nextProps) {
    this.loadTasks()
  }

  render() {
    return (
      <div className='pointer'>
        {this.state.tasks.map((task) => {
          if(task.completed) {
            return <Completed key={task._id} {...task} />
          }
          else {
            return <NotCompleted key={task._id} {...task} />
          }
        })}
      </div>
    )
  }
}

export default ShowTasks

import React，{Component}来自“React”
从“axios”导入axios
已从“/Completed.jsx”导入完成
从“./NotCompleted.jsx”导入NotCompleted
类ShowTasks扩展组件{
建造师（道具）{
超级（道具）
此.state={
用户：this.props.user，
任务：[]，
}
this.loadTasks=this.loadTasks.bind（this）
}
loadTasks（）{
axios.post（“/api/loadtasks”{
名称：this.state.user.name
})
。然后（（res）=>{
this.setState（{tasks:res.data.tasks}）
})
.catch（（错误）=>{
失误
})
}
组件将接收道具（下一步）{
这是loadTasks（）
}
render（）{
返回(
{this.state.tasks.map（（task）=>{
如果（任务已完成）{
返回
}
否则{
返回
}
})}
)
}
}
导出默认显示任务
您确定正在执行
then
部分吗？你收到控制台日志了吗？重复：谢谢@Chris的回复。它确实有效嗨，谢谢你的快速回复。但它仍然不起作用。未访问componentWillMount函数。componentWillMount i是什么意思