React:将状态传递给兄弟姐妹

Question

我创建了一个受控组件，它将输入字段限制为只有4个数字。这些数字可以在任何时候更改，只要数字是四位数，我希望结果传递给兄弟组件进行操作。

我将值发送给父状态，这将重新呈现，兄弟状态将获得该值。但是我的组件也重新渲染，输入字段失去了值。

我应该把值发送给父元素，让父元素在每次输入改变时重新渲染吗?

还是使用上下文?

任何见解将是伟大的，因为我是新的反应。

const NumberComp = ({setPostcode})=>{

const [ fieldValue, setFieldValue ] = useState('')
useEffect(()=>{
if(fieldValue.length == 4){
setPostcode(fieldValue)
}
}, [fieldValue])
const updateNumber = (e)=>{
const value = e.target.value
if(value.length > 4 || isNaN(value)) return
setFieldValue(value)
}
return <input onChange={updateNumber} value={fieldValue} type="text" />
}

Answer 1

如果你的项目很小，那么提升状态并将其传递给兄弟组件和组件记忆，否则如果你想避免prop钻取，请使用上下文API。

Answer 2

你需要让重新渲染发生在父元素上。只有当父渲染被重新渲染时，子渲染才有可能。但是，这不会重新渲染未更改的部分，因为React只更新必要的部分。

你也可以看看这个问题来帮助你消除疑虑。

你也可以尝试使用react备忘录，但它需要一些很好的控制来确保你的组件在应该更新的时候更新。