使用expo和react-native我创建了一个名为 MainStateScreen
这个屏幕基本上有两个直接的子代,叫做 OptionsComponent
和 NavigationButton
. OptionsComponent
有多个子代,当修改时,会更新该子代的状态。MainStateScreen
所以我们可以把它作为一个道具传到下一个屏幕上,并使用 NavigationButton
. 至少应该是这样的。
相反,当我尝试修改 OptionsComponent
的孩子,并使用 MainStateScreen
的更新函数,我得到以下错误。
以下是我的组件组成的伪代码。
MainStateScreen.js
const defaultOptionsObject = [
{
name: '',
value: 1,
count: 0,
},
{
name: '',
value: 8,
count: 0,
},
{
name: '',
value: 20,
count: 0,
},
{
name: '',
value: 25,
count: 0,
},
{
name: '',
value: 30,
count: 0,
},
{
name: '',
value: 32,
count: 0,
},
{
name: '',
value: 100,
count: 0,
},
]
const MainStateScreen = () => {
const [options, setOptions] = useState(defaultOptionsObject)
return (
<View>
<ScrollView>
<OptionsComponent options={options} setOptions={setOptions} />
</ScrollView>
<NavigationButton onPress={() => navigation.push('OtherScreen', { options })} />
</View>
)
}
选项组件.js
const SingleOptionComponent = ({ index, option, options, setOptions }) => {
const [stateOption, setStateOption] = useState({ ...option })
const updateCount = val => {
const tempOption = { ...stateOption }
if (val) {
tempOption.count += 1
} else if (tempOption.count !== 0) {
tempOption.count -= 1
}
setStateOption(tempOption)
}
useEffect(() => {
const tempOptions = [ ...options ]
tempOptions[index] = { ...stateOption }
setOptions(tempOptions) // Commenting this out removes the error.
}, [stateOption])
const AddSubtractButton = () => {
return (
<View>
<TouchableHighlight onPress={() => updateCount(true)}>
<Text>Add</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => updateCount(false)}>
<Text>Subtract</Text>
</TouchableHighlight>
</View>
)
}
return (
<ListItem rightElement={AddSubtractButton} />
)
}
const OptionsComponent = ({ options, setOptions }) => {
return (
<View>
{options.map((option, index) => {
return (
<SingleOptionComponent
key={`${option?.value}-${index}`}
index={index}
option={option}
options={options}
setOptions={setOptions}
/>
)
})}
<View/>
)
}
确切的错误是。
TypeError: undefined is not a function (near '...options.map...')
This error is located at:
in OptionsComponent (at MainStateScreen.js)
但是当我 console.log
的 setOptions
中的功能 useEffect
的 SingleOptionComponent
, Function setOptions
是打印在控制台中的。
如果我把 setOptions(tempOptions)
呼叫 useEffect
里面 SingleOptionComponent
错误会消失,但我需要类似的东西来完成上传到父体和上传到母体的过程。NavigationButton
.
我可能做错了什么?
我建议做几件事情,可能会解决这个问题,而不需要在我的机器上重新创建它。 尝试添加 setOptions
至 useEffect
依赖数组。 也许由于某些原因,当它被传递给孙子组件时,它没有得到更新的 setOptions。 你还应该把 options
因为你的效果取决于该值何时变化。
如果还不行的话,可以尝试使用传播操作符 setOptions({ ... tempOptions})
.
如果这样不行,我建议在最上层组件中处理setOptions,并将回调传递给孙子组件,而不是将 setOptions
函数。 该回调并获得 option
父代中的按下,然后根据父代中的 option._id
(我会给每个选项提供一个唯一的_id,而不是为了能做上面的事情而动态计算。)。也使代码更容易理解发生了什么,因为父体会处理它自己需要的状态,并适当地设置它。