我正在尝试在 React 中进行状态提升。我错过了什么？

Question

我是新来反应的——实际上是几天前的事情。
我想做的就是状态提升。 CreateTweet 的状态将被提升到作为根的 App.js，以便提升的状态可以传递到根渲染的其他组件上。
一切似乎都已就位，但我收到以下错误：
未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本 请参阅 https://reactjs.org/link/invalid-hook-call 了解有关如何调试和解决此问题的提示。

App.js

class App extends Component {
    render() {
            
        const [textInput, setTextInput] = useState("");
        const [tweets, setTweets] = useState([]);

        const name = "SomeNameJohnDoe";
        return (
                <div>
                    <h1>Hello React learners!</h1>
                    <CreateTweet
                    textInput={textInput}
                    setTextInput={setTextInput}
                    tweets={tweets}
                    setTweets={setTweets}
                    />
                    <TweetList name={name} tweets={tweets}/>
                </div>
            );
    }
}

创建Tweet.js

function CreateTweet({textInput, setTextInput, tweets, setTweets}){

    const userInputHandler = (e) => {
        setTextInput(e.target.value);
    }
    const submitTweetHandler = (e) => {
        e.preventDefault();
        setTweets([...tweets, textInput]);
        setTextInput("");     
    }
    return(
        <form onSubmit={submitTweetHandler}>
            <textarea value={textInput} onChange={userInputHandler} cols="50" rows="5"></textarea>
            <button>Submit</button>
        </form>
    );
}

谢谢你帮助我。干杯！

Answer 1

您不能将类与react hooks一起使用。就这么简单。
有关类和功能组件的更多信息：
https://levelup.gitconnected.com/react-state-in-class-and-function-components-2269614579c4

Answer 2

class App extends Component {

 state = {
   textInput: "",
   tweets: ""
 }

 textInputHandler = (val) => {
    this.setState({
        textInput: val       
    })
 }

 tweetsHandler = (val) => {
    this.setState({
        tweets: val       
    })
 }

 name = "SomeNameJohnDoe";

    render() {
        
        return (
                <div>
                    <h1>Hello React learners!</h1>
                    <CreateTweet
                    textInput={this.state.textInput}
                    setTextInput={this.textInputHandler }
                    tweets={this.state.tweets}
                    setTweets={this.tweetsHandler }
                    />
                    <TweetList name={this.name} tweets={this.tweets}/>
                </div>
            );
    }
}

Answer 3

在 React 中，你应该理解函数组件和类组件之间的区别。 React 16.8 中引入了 Hooks，以弥补功能组件中状态管理（useState）、生命周期（ComponentWillMount、ComponentDidMount...等）的不足。

每次尝试使用钩子时，请确保声明了函数组件而不是类。

PS：函数式组件是一个纯Javascript函数。

所以你有两种方法来实现你的组件应用程序

1. 作为功能组件

    import React, {useState} from 'react';
    const App =(props)=> { //if you are planning to use any props
        const [textInput, setTextInput] = useState("");
        const [tweets, setTweets] = useState([]);
        const name = "SomeNameJohnDoe";  
            return (
                    <div>
                        <h1>Hello React learners!</h1>
                        <CreateTweet
                        textInput={textInput}
                        setTextInput={setTextInput}
                        tweets={tweets}
                        setTweets={setTweets}
                        />
                        <TweetList name={name} tweets={tweets}/>
                    </div>
               );
    }
   

2. 作为类组件：

    import React from 'react';  
    const name = "SomeNameJohnDoe";    
    class App extends Component {
        state = {
            textInput: "",
            tweets: ""
        }
        setTextInput = (input) =>{
            this.setState({textInput:input});
        }
        setTweets = (tweet) =>{
            this.setState({tweets:tweet});
        }
        render() {
            return(
               <div>
                  <h1>Hello React learners!</h1>
                  <CreateTweet
                       textInput={this.state.textInput}
                       setTextInput={this.setTextInput}
                       tweets={this.state.tweets}
                       setTweets={this.setTweets}
                   />
                   <TweetList name={name} tweets={this.state.tweets}/>
               </div>
            );
        }
    }