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

Question

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

这是我尝试过的，

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

   let [schema, setSchema] = useState([])

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

父组件内的 DataTable 组件用于显示数据 ::

                <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 的 value prop 中填充 schema 的值，

架构应该看起来像

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

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

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'])

尝试找出出了什么问题，从我的猜测Object.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
      }
    ])
 };