两个props的Basis想要更新单个状态值，没有使用effect

Question

更新单个状态值的最好方法是什么，如果特定的两个道具改变了，没有使用效果，因为从性能的角度来看，我们不应该在使用效果中设置状态。

例如:

const NestedList = ({childItems, parentItems, selected, ...rest}) => {
const [currentItems, setCurrentItems] = useState({}); //assume this could be hash object 

// Wrong X
useEffect(() => setCurrentItems(parentItems), [parentItems])
// Wrong X
useEffect(() => setCurrentItems(childItems), [childItems])
return ...

Answer 1

React组件更新状态更改和Prop更改。所以你不需要做任何额外的

Answer 2

试试下面的单次使用效果。你还可以比较以前的道具和新的道具。

useEffect(() =比;{setCurrentItems (whateverthevalueis)} [prop1 prop2]);

Answer 3

我想弄清楚的是在这种情况下的why。如果你总是想要改变一个状态，为什么还需要它呢?为什么这两个道具在状态上是相互替换的?

正如很多人已经说过的那样，在useEffect中设置状态并没有错。但是useEffect应该用于副作用。 没有万能的解决方法。

如果你用props设置初始状态，然后组件自己更新状态，则使用状态。

const processItems = (childItems, parentItems, ) => {
// Do what you want to create one state
return childItems 
}
const NestedList = ({childItems, parentItems, selected, ...rest}) => {
// use props to set the inital state
const [currentItems, setCurrentItems] = useState(processItems(childItems, parentItems))
// We can later mutate the state, however if the props change we do not care

如果父类总是将状态作为prop传递，则不需要状态，因为状态由上级处理。

const NestedList = ({childItems, parentItems, selected, ...rest}) => {
// No need for a state here, we can just use the props directly and
// the parent will pass the updated props when the state changes

如果父类传递了几个props，你需要根据这些props来计算东西，使用memo hook。

const NestedList = ({childItems, parentItems, selected, ...rest}) => {

const currentItems = useMemo(() => {
// Add the condition of what items to show here 
if(parentItems.length > 0) return parentItems
return childItems
}, [childItems,parentItems])
return ...