Question

我使用了第一个索引过滤的数组值结果，并根据不同的标准对其进行了渲染
我很震惊如何使用映射所有过滤后的数组值的索引值并将其呈现在UI上
你们能帮助我解决您的建议问题
整个代码可在stackblitz及其链接中找到：https://stackblitz.com/edit/react-geum6v?file=index.js
代码段，并尝试了多个索引数组值：
您能告诉我在执行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} />);

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

1 个答案: