Reactjs 反应：设置状态不更新可视组件

状态更改时，功能组件不执行其可视更新

我提供了我的组件的一个最小示例，其中我设置了一个新状态，但该组件不会在浏览器中更新

从React导入*作为React 从“@material ui/core”导入{Button、makeStyles、Grid、TextField、createStyles} 从react-dom导入ReactDOM； const styles=makestylesTime=>createStyles{ 容器：{ 显示：“flex”， flexWrap:“wrap”， }, 文本字段：{ marginLeft:theme.spacing1， marginRight:theme.spacing1， }, 按钮：{ 页边空白：theme.spacing1， } } 导出接口RTestData{ 标题：字符串 } 界面道具{ 数据：RTestData[] } const testData:RTestData[]=[{title:AA}，{title:BB}，{title:CC}，{title:DD}，{title:EE}] export const RTestContainer:React.FunctionComponent=props=>{ const[count，setCount]=React.useState0 const[data，setData]=React.useStateprops.data[count] 常量类=样式 常量handleClick=>e:React.MouseEvent=>{ console.log`按钮单击` 常数目标=e.target setCountcount+1 setDataprops.data[计数] console.logdata+JSON.stringifyprops.data+->+JSON.stringifydata } 回来 下一个 } 导出常量RTestForm:React.FunctionComponent=props=>{ const[title，setTitle]=React.useStateprops.title 常量handleChange=>e:React.ChangeEvent=>{ 常数目标=e.target 常量值=target.value console.logTitle更改->+标题 设定值 } 常量类=样式 回来 } ReactDOM.render ，document.getElementById'root'； 点击按钮应选择并显示下一个数据项，例如。G文本字段显示AA、BB等。

在handleClick上，您可以更改RTestContainer状态，但不会影响RTestForm状态

---

谢谢，太明显了，所以我没注意到。

//                 v On handleClick changes `data` state
<RTestForm title={data.title} />

//  Changing props won't re-initial the state. v
const [title, setTitle] = React.useState(props.title);

export const RTestForm: React.FunctionComponent<RTestData> = props => {
  const [title, setTitle] = React.useState(props.title);

  React.useEffect(() => {
    setTitle(props.title);
  }, [props.title]);

  return <>...</>

};