如何在 react js 中从父组件状态更新子组件下拉列表中的选项值?

Question

我有一个要求，例如，在父组件中，我从api获取数据并将该数据数组传递给DataTable子组件以表格格式显示。在这种情况下，我需要为每列显示一个下拉列表，并且选项是预定义的(不需要动态值(。我只需要，当用户选择下拉值时，它应该在父组件状态中更新并填充在特定下拉组件中选择的组件。

这是我尝试过的，

用于存储下拉值的父组件 ：：

let [schema, setSchema] = useState([])
const handleChange = (event, index) => {
setSchema([
...schema,
{
Name: event.target.name,
Type: event.target.value
}
]);
};

父组件内的数据表组件显示数据 ：：

<Container>
<DataTable
data={data}
meta_data={meta_data}
handleChange={handleChange}
schema={schema}
/>
</Container>

这里每个对象的迭代从数组到显示一次下拉列表：：

{
Object.keys(filteredData[0]).map((field, index) => {
return (
<> 
<TableCell align="left" key={field} className={classes.headings}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<FormControl className={classes.margin}>
<NativeSelect
id="demo-customized-select-native"
input={<BootstrapInput />}
onChange={(e) => props.handleChange(e, index)}
name={field}
value={props.schema.length > 0 ? props.schema[index]['Type'] : null}
> 
<option value={0}>Type</option>
<option value={`str`}>string</option>
<option value={`int`}>interger</option>
<option value={`float`}>float</option>
</NativeSelect>
</FormControl>
</div>
</TableCell>
</>
) 
}
)}

我想要，在 NativeSelect 的值属性中填充架构的值，

架构应如下所示

[
{
Name: 'passegner',
Type: 'str'
},
{
Name: 'Month',
Type: 'float'
},
]

当我检索基于索引的该数组的"类型"字段时。它给出了未定义的"类型"，但我实际上在控制台从子组件返回外部时工作。

value={props.schema.length > 0 ? props.schema[index]['Type'] : null}  - > this line giving me the error and wroking fine when console.log() outside return.

console.log(props.schema.length > 0 ? props.schema[0]['Type'])  -> it is working

如何解决？

任何建议都会很棒。

Answer 1

在 return 语句上方放置一个控制台，例如

console.log(props.schema[index]['Type'])

尝试找出出了什么问题，从我的猜测对象.keys(filteredData[0](可能与props.schema[index]相比具有移动数组值。所以它可能会抛出错误。

Answer 2

useState钩子具有以下形式：

const [state, setState] = useState(initialState);

在 React 文档中写道：

如果使用以前的状态计算新状态，则可以将函数传递给 setState。该函数将接收以前的值，并返回更新的值。

这意味着您应该更改此设置：

setSchema([
...schema,
{
Name: event.target.name,
Type: event.target.value
}
]);

进入这个：

setSchema((prevSchema) => {
return [
...prevSchema,
{
Name: event.target.name,
Type: event.target.value
}
])
};