如何从 react hooks 或 useImpact 获取新的更新数据?

Question

如何从 react hooks 或 useImpact 获取新更新的数据？

我加载了标题为：Shoes然后将输入更改为"New Shoes"，但子组件中的数据没有更改，它仍然"Shoes"。 如何更新它？

在父组件中：

<UrlInput
value={url}
title={title}
baseURL={baseURL}
onChange={this.onURLChange}
/>

子组件

const UrlInput = ({title}) => {
const [newTitle, setTitle] = useState(title);
useEffect(() => {
console.log(title)
setTitle(newTitle)
})
return (
);
};

Answer 1

您应该添加标题作为依赖项以使用效果并使用title而不是newTitle更新状态。此外，原始状态需要设置为title而不是Title.

const UrlInput = ({title}) => {
const [newTitle, setTitle] = useState(title);
useEffect(() => {
console.log(title)
setTitle(title)
}, [title]);
return (
);
};

附言此外，当状态可以直接从 props 派生时，将 props 复制到状态中也是一种反模式，除非您需要在本地修改状态。

Answer 2

const UrlInput = ({title, ...rest}) => {
const [newTitle, setTitle] = useState(title);
useEffect(() => {
console.log(title)
setTitle(title)
},[title]) 
return (
);
};

尝试用上面的代码替换代码。您应该将一个新值传递到 setTitle(( 中，您传递的变量与存储先前值的变量相同。

Answer 3

对于get，组件中任何特定于状态的更改都使用useEffect((( => {}，[此处的特定条件](。

您可以在此处遵循此代码。

在父组件中：

const [title, setTitle] = useState('');  // initial state parent 
const onURLChange = e => setTitle(e.target.value) ; set state parent from children triger 
<UrlInput
value={url}
title={title}
baseURL={baseURL}
onChange={this.onURLChange}
/>

子组件

const UrlInput =props => {
const [newTitle, setTitle] = useState(props.Title);
useEffect(() => {
console.log(title)
setTitle(newTitle)
},[props.Title])
return (
);
};