用于反应的多个索引数组值的映射方法

Question

• 我使用了第一个索引过滤的数组值结果，并根据不同的条件呈现它们
• 我很惊讶如何使用映射过滤数组值的所有索引值并将其呈现在 UI 上
• 你们能帮我解决您的建议问题吗
• 完整代码可在 stackblitz 及其链接中找到：https://stackblitz.com/edit/react-geum6v?file=index.js
• 下面提供了一个用户过滤值和尝试的多个索引数组值的代码 sn-p：
• 能否告诉我在为 map 方法执行多个索引数组值时我在哪里出错了

index.js（JS部分）

sportsZipSearch = () => {
    const { zip1, dob1, age1, state1, check, count } = this.state;

    const newArray = students.filter((el) => { return ((el.zip === zip1) && (parseInt(el.Age) <= parseInt(age1[Object.keys(age1)[0]])) || (el.sports_state != (state1)) && check ) });
    const newArray1 = newArray[0].Sports_games.map((el1) => { return Object.keys(el1) });
    //const sorted = newArray1[Object.keys(newArray1)].sort();
    console.log(age1);
    console.log(zip1);
    console.log("here--", this.state.zip1, this.state.age1);
    console.log(newArray);
    console.log(newArray1);
    //console.log(sorted);
    console.log(newArray.Subjects);
    console.log(count);
    this.setState({ result: newArray, zipValue: true })
  }

index.js (html 部分)

Show list Sports: {result.length && result[0].Sports_games.map(g => { var visibility = (check && g[Object.keys(g)[0]]) ? 'block' : 'none'; return <div style={{display: visibility}}>{Object.keys(g)[0]} {g[Object.keys(g)[0]]}</div> } )}<br/><br/>

Show list Sports: {result.map(result_new => result_new.length && result_new.Sports_games.map(g => { var visibility = (check && g[Object.keys(g)]) ? 'block' : 'none'; console.log(visibility);return <div style={{display: visibility}}>{Object.keys(g)} {g[Object.keys(g)]}</div> } ))}<br/><br/>

Answer 1

您应该创建一个组件，在其 props 中获取这些值并显示它们，然后使用 map 将数据数组转换为组件数组。然后将其放入您想要的任何容器元素中。

像这样：

function MyComponent() {
    return (
        <div>
            <p>{props.data.name}</p>
            <p>{props.data.age}</p>
        </div>
    );
}

然后将数据数组映射到组件数组：

my_component_array = my_data_array.map(d => <MyComponent data={d} />);