React：将状态传递给兄弟姐妹答案

【问题标题】：React: Pass State To SiblingsReact：将状态传递给兄弟姐妹
【发布时间】：2021-11-19 07:41:30
【问题描述】：

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

我将值发送到父状态，然后重新渲染，兄弟获得值。但是我的组件也会重新渲染，并且输入字段会丢失值。

我是否应该将值发送给父级，让父级在每次输入更改时重新渲染？

还是使用上下文？

任何见解都会很棒，因为我是 React 新手。

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" />

}

【问题讨论】：

这个问题我不清楚。您只呈现一个绑定到您的fieldValue 的input 字段。 我将值发送到父状态并重新渲染并且兄弟姐妹获取值是什么意思。但是我的组件也会重新渲染，并且输入字段会丢失值。？您将哪个组件称为兄弟组件？

标签： javascript reactjs state use-state controlled-component

【解决方案1】：

如果您的项目很小，则提升状态并将其传递给兄弟组件和组件记忆，如果您想避免道具钻探，请使用上下文 API。

【讨论】：

【解决方案2】：

您还需要让重新渲染发生在父级上。只有在重新渲染父级时，才能进行子级渲染。但是，这不会重新渲染未更改的部分，如 React updates only what is necessary。

您也可以查看this question 来帮助您消除疑虑。

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

【讨论】：