javascript - Flatlist 不显示嵌套数组

Question

所以我试图在 Flatlist 中显示一个数组，我正在使用 Redux 更新初始状态，我通过在 LIST CREATION 屏幕中收集所有数据来做到这一点.push，然后我将它们插入到数组中，然后我使用updateList更新的初始状态list，我用来getDerivedStateFromProps在 TRIALLIST 屏幕中获取该列表并将其显示在 aFlatlist中，问题是我无意中创建了嵌套数组，并且它不允许我在 Flatlist 中显示数据，这是示例我要显示的数组：

Array [
  Array [
    Object {
      "Name": Object {
        "Name": "John",
      },
      "key": 0.05992611071666909,
      "favNumber": 1,
      "age": 30,
    },
  ],
]

这里有各种屏幕：

列表创建

import { connect } from 'react-redux';
import { updateList } from '../../../../../redux/actions/index.js';


class trial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      trial: '',
      list: [],
        };
  }

submitTrial(){
    let list = this.state.list;
    list.push({
      key: Math.random(),
      Name: this.props.route.params,
      favNum: favNum,
      age: age,
       });
    this.props.updateList(list);
    this.props.navigation.navigate("TrialList");
  }

 render() {    
    return (

            <Button transparent>
              <Icon
                name="checkmark"
                onPress={() =>  this.submitTrial()}
              />
            </Button>

const mapDispatchToProps = { updateList };

export default connect( mapDispatchToProps )( trial );

试用者

class TrialList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }


static getDerivedStateFromProps(props, state) {
 if (props?.list) {
  return {
    list: [...state.list, props.list],
  };
 }
  return null;
 }
  

  render() {
    return (
        <FlatList
            data={this.state.list}
            keyExtractor={(item, index) => item.key.toString()}
            contentContainerStyle={{ flexGrow: 1 , flexGrow: hp('20%')}}
            renderItem={({ item }) => (
              <View>
                <View>
                  <Text>
                    {item.Name.Name}
                  </Text>
                  <Text>
                     {item.favNumber}
                  </Text>
                  <Text>
                    {item.age}
                  </Text>
                 </View>
               </View> 
              />



 function mapStateToProps(store){
  return{
      list: store.userState.list
   };
  }
export default connect(mapStateToProps)(TrialList);

索引.JS

import { ADD_LIST } from "../constants/index";

export const updateList = (list) => {
  return console.log({ type: ADD_LIST, payload: list})
}

减速器

import { USER_STATE_CHANGE, ADD_LIST } from "../constants";

const initialState = {
  currentUser: null,
  list: null,
};



export const user = (state = initialState, action) => {
  switch (action.type){
      case USER_STATE_CHANGE:
        return {
          ...state,
          currentUser: action.currentUser,
        };
      case ADD_LIST: 
      return{
        ...state,
        list: [...action.payload],
      }
      default:
        return state
  }
  
};

在此先感谢您的帮助。

标签： javascriptreactjsreact-nativereact-reduxreact-native-flatlist