Reagieren Sie untergeordnete Komponente rendern nicht auf es Statusänderung

Question

Ich habe eine Aufgabenkomponente, die andere Komponenten zurückgibt. Wenn ich jedoch den Status einer der untergeordneten Komponenten aus der Komponente "Aufgaben" ändere, wird sie nicht erneut gerendert.

Ich übergebe den Zustand 'newTaskAdded' vom Elternteil an das Kind als Requisiten und weise es dem Kindstatus zu, um die Kindkomponente erneut zu rendern, aber es passiert immer noch nicht.

Mein Ziel ist: Wenn ein Benutzer eine Aufgabe hinzufügt, möchte ich, dass sie sofort auf dem Bildschirm angezeigt wird, dh der Benutzer muss auf Seite aktualisieren, um die neue Aufgabe anzuzeigen.

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 

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 

Answer 1

Also das Problem in Ihrem Kind Funktion ist, wo man Requisiten zu Staat,

Sie setzen Requisiten setzen auf Zustand im Konstruktor und der Konstruktor wird nicht jedes Mal aufgerufen, wenn sich die Requisiten ändern, sondern nur beim ersten Mal, wenn die Komponente gerendert wird, und daher wird der Zustand nicht mit den korrekten Werten aktualisiert.

Sie sollten die Stützen in der componentWillReceiveProps Funktion werden Einstellung, die auf jeden übertragen von der übergeordneten Komponente

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 

Lesen Sie mehr über den Lebenszyklus-Funktionen aufgerufen wird, und wenn sie zu here:

Answer 2

mit OK ! gelöst:

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 

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 = { 
     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