Reactjs 通过的道具不变

我不太会反应，因此这可能是对概念的误解，而不是编程错误

我的问题如下： 在父组件中，我通过道具将变量及其更改函数传递给子组件。然后，当我使用change函数来更改变量时，它似乎起了作用。当我在父组件中记录变量值时，新值似乎设置正确。但是，当我将console.log变量作为prop传递到我的子组件中时，它显示并输出初始状态（test2436）。 所以我的猜测是，要么在第一个位置没有正确设置值，要么道具没有更新。能告诉我，我的错误是什么吗

父组件：

import Input from './input.js';
import Graph from './graph.js';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  sharedData = "test2436";

  setSharedData = (val) =>{
    console.log("bef+"+this.sharedData);
    this.sharedData = val;
    console.log("aft"+this.sharedData);
    //this logs the new value correctly
  }
  
  componentDidMount = function () {
    console.log(this.sharedData);
  }

  render() {

    return <div className="App">
      <label key={this.sharedData}>{this.sharedData}</label>
      <BrowserRouter>
        <Switch>
          <Route path="/graph" component={Graph} />
          <Route path="/" render={() => (<Input data={this.sharedData} change={this.setSharedData} />)} exact />
        </Switch>
      </BrowserRouter>
    </div>
  }
}

export default App;

从“/Input.js”导入输入；
从“./Graph.js”导入图形；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
}
sharedData=“test2436”；
设置共享数据=（val）=>{
log（“bef+”+this.sharedData）；
this.sharedData=val；
console.log（“aft”+this.sharedData）；
//这将正确记录新值
}
componentDidMount=函数（）{
console.log（this.sharedData）；
}
render（）{
返回
{this.sharedData}
（）}精确/>
}
}
导出默认应用程序；

子组件

import React from "react";


class Input extends React.Component {

    constructor(props) {
        super(props)
        this.state = { value: "" };
        this.handleInput = this.handleInput.bind(this);
        this.processInput = this.processInput.bind(this);
        console.log(props);
        this.handler = this.props.change;
    }
    
    handleInput(event) {
        this.setState({ value: event.target.value });
        console.log(this.props);
        this.handler(event.target.value);
        //console.log("after"+this.props.data);
    }

    
    processInput(event) {
    //unimporant code
    }

    render() {
        return <form>
            <textarea onChange={this.handleInput} id="inputData" rows="20" cols="180">
            </textarea><p>
                <button type='button' onClick={this.processInput} >Analyze</button></p></form>
    }
}

export default Input;

从“React”导入React；
类输入扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={value:：}；
this.handleInput=this.handleInput.bind（this）；
this.processInput=this.processInput.bind（this）；
控制台日志（道具）；
this.handler=this.props.change；
}
handleInput（事件）{
this.setState（{value:event.target.value}）；
console.log（this.props）；
this.handler（event.target.value）；
//console.log（“在”+this.props.data之后）；
}
processInput（事件）{
//无关紧要的代码
}
render（）{
返回

分析

}
}
导出默认输入；

我听说使用state是传递数据的首选方法。 如果我设法让它工作，这被认为是一个坏的做法吗？ 是否有更好的方法来传递数据，而不需要很长时间来实现？我还不想去lern redux或类似的地方，因为我还在学习react:）

谢谢你的回复

编辑：

---

我已经通过getDerivedStateFromProps函数获得了新的道具。这解决了我目前的问题，但我的其他问题仍然没有解决。

您需要将

共享数据

存储在类组件的

状态

对象中，并使用

设置状态

像下面的代码一样进行更新

（我将代码缩减为所需的任何内容，如果您需要更多详细信息，请告诉我）

类应用程序扩展了React.Component{
状态={
共享数据：“test2436”
}
设置共享数据=（val）=>{
this.setState（{sharedData:val}）
}
渲染（）{
返回(
)
}
}

---

编辑：修复语法错误

您好，谢谢您的回答，我理解这个原则。因此，我只想澄清一下：如果为变量指定了新值，则将变量（而不是状态对象）作为prop传递不会导致prop更新。如果我想让道具自动更新为变量变化，我必须使用state对象。对吗？如果是这样，你知道为什么作为道具的普通变量不会自动更新，而状态对象会自动更新吗？你是正确的，react只跟踪更新

状态中的数据（至少在这个范围内，还有上下文和redux状态等，但这些是更高级的用例），react将不知道更新任何未存储在
状态
变量中的数据，即使您手动更改它，请告诉我这是否合理。合理。感谢您的快速回复，我现在对if有了更好的了解。顺便说一句：我很确定在状态初始化中需要使用：而不是=并删除分号。
class App extends React.Component {

    state = {
        sharedData: "test2436"
    }

    setSharedData = (val) => {
        this.setState({sharedData: val})
    }

    render () {
        return (
            <Input data={this.state.sharedData} change={this.setSharedData} />
        )
    }
}