如何從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
      }
    ])
 };