ReactJS类如何将状态从子组件传递到其父组件

Question

我会像这样调用LI标签(LI(，这样它们就不会成为他的问题的要点

嗨，我正在尝试在ReactJS中将一个Child组件发送给它的Parent。

我尝试了很多方法，设法将子组件状态发送回其Parent道具，但当页面呈现时，我有几个(li(标记，我希望更新能用它更新，例如：

(li(硬编码文本(/li((li(旧文本(/li((li(更新道具(/li((li(更新道具等(/li(

但更新删除了所有以前的代码，所以看起来像：

(li(更新道具删除了所有以前的li(/li(

希望这里有意义的是我的代码

母组件

import React from 'react';
import { generateId, getNewExpirationTime } from '../../util/utilities';
import Thought from '../Thought/Thought.js'
import AddThoughtForm from '../AddThoughtForm/AddThoughtForm.js'

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
thoughts: [{
id: generateId(),
text: 'This is a place for your passing thoughts.',
expiresAt: getNewExpirationTime()
},
{
id: generateId(),
text: "They'll be removed after 15 seconds.",
expiresAt: getNewExpirationTime()
}]
};
this.addThought = this.addThought.bind(this);
this.removeThought = this.removeThought.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
this.componentDidUpdate = this.componentDidUpdate.bind(this);
}
addThought(thought) {

console.log("LOOK")
console.log(thought)
console.log("DONE")
console.log(this.state.thoughts);
this.state.thoughts.push(thought);
this.setState(prevState => ({ 
...prevState,
thoughts: [thought] 
}))
console.log("passed over")
console.log(this.state.thoughts);

}
removeThought(selected) {
//alert('selected');
let updatedThoughts = this.state.thoughts.filter((thought) => selected.id !== thought.id);
return this.setState({ thoughts: updatedThoughts })
}

render() {
return (
<div className="App">
<header>
<h1>Passing Thoughts</h1>
</header>
<main>
<AddThoughtForm 
addThought={this.addThought}
thoughts={this.state.thoughts} />
<ul className="thoughts">
{(this.state.thoughts) && this.state.thoughts.map((thought, index) => (
<Thought 
key={thought.id} 
thought={thought}
removeThought={this.removeThought} />
))}
</ul>
</main>
</div>
);
}  

}

仍然在父组件上，我的.addThought(arg(是操作所在的位置。这是我将Child-AddThoughtForm状态对象发送到其中的位置。在.addThout((内部，我正在执行以下操作：

addThought(thought) {
console.log("LOOK")
console.log(thought)
console.log("DONE")
console.log(this.state.thoughts);
this.state.thoughts.push(thought);
this.setState(prevState => ({ 
...prevState,
thoughts: [thought] 
}))
console.log("passed over")
console.log(this.state.thoughts);
}

发生的情况是，当我将其传递给我以前的状态时，我的父组件将被删除，并由我的子组件中的此新信息替换。我该如何阻止它？我只想将此新信息添加到父状态已经具有的以前的信息中。这是我父母的状态：

constructor(props) {
super(props);
this.state = {
thoughts: [{
id: generateId(),
text: 'This is a place for your passing thoughts.',
expiresAt: getNewExpirationTime()
},
{
id: generateId(),
text: "They'll be removed after 15 seconds.",
expiresAt: getNewExpirationTime()
}]
};
this.addThought = this.addThought.bind(this);
this.removeThought = this.removeThought.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
this.componentDidUpdate = this.componentDidUpdate.bind(this);
}

现在转到子组件

AddThoughtForm.js

import React from 'react';
import { generateId, getNewExpirationTime } from '../../util/utilities';
class AddThoughtForm extends React.Component {
constructor(props) {
super(props);
this.state = {
ideas: [this.props.thoughts] // I can take off [] 
}
this.handleTextChange = this.handleTextChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleTextChange(event) {

const { value } = event.target


this.setState(prevState => {
let thoughts = Object.assign({}, prevState.ideas);  // creating copy of state variable 
thoughts.id = generateId();
thoughts.text = value;                    // update the name property, assign a new value      
thoughts.expiresAt = getNewExpirationTime();           
return { thoughts };                                 // return new object 
})

console.log(this.state.ideas)
}
handleSubmit(event) {
event.preventDefault();
this.props.addThought(this.state.thoughts)


alert(this.state.ideas);

}
render() {
return (
<form className="AddThoughtForm" onSubmit={this.handleSubmit}>
<input
type="text"
aria-label="What's on your mind?"
placeholder="What's on your mind?"
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Add" />
</form>
)
}
}
export default AddThoughtForm;

在我的.handleTextChange(event(中，我将它与渲染中的输入标记链接在一起，所以我正在做的事情是我想要输入的，我希望它传递给我的父组件。好吧，它被忽略了，但每次旧的(li(都会重写旧的信息，然后它只是一个新的li。关于我如何解决这一切，有什么想法吗？

handleTextChange(event) {        
const { value } = event.target
console.log(value)

this.setState(prevState => {
let thoughts = Object.assign({}, prevState.ideas);  // creating copy of state variable 
thoughts.id = generateId();
thoughts.text = value;                     // update the name property, assign a new value      
thoughts.expiresAt = getNewExpirationTime();           
return { thoughts };                                 // return new object 
})        
console.log(this.state.ideas)
}

Answer 1

我设法修复了

我只需要在父组件上添加一个想法：[…prevState，think]，因为我用新的想法覆盖了旧的想法像这样：

在方法中，.addThought((

this.setState(prevState => ({ 
...prevState,
thoughts: [...prevState.thoughts, thought] 
}))