Question

我正在使用ReactJS制作一个星球大战网络应用程序，其数据来自SWAPI（用于返回有关星球大战的JSON数据的API）。我已经完成了所有工作，但希望能够更好地控制所取得的结果。目前每个字符都是从SWAPI中提取的，我想指定在我自己的JSON文件中显示哪些字符，并将其与Swapi的结果进行比较。

以下是任务细分：

使用Fetch将星球大战角色信息作为JSON从SWAPI中提取到ApiResonse.props.results
将指定字符数组添加到App state.characters
将App.state.Characters中的名称与ApiResponse.results进行比较并渲染字符列表

这是我目前的代码：

/* App */
class App extends React.Component {

    // Set initial state
    constructor() {
        super();
        this.state = {
            characters: [],
        }   
    }

    // Add specified characters to App.state.characters
    componentDidMount() {
        this.setState ({
            characters : require('./charnames')
        });
    }

    render() {
        return (
            <div>
                <Navbar/>
                <Header/>
                <Characters/>
                <Footer/>
            </div>
        );
    }
}

SWAPI组件

// Uses react-fetch to retrive json from swapi
class Api extends React.Component{
  render(){
    return (
      <Fetch url="http://swapi.co/api/people/">
        <ApiResponse test={this.props.results}/>
      </Fetch>
    )
  }
}

class ApiResponse extends React.Component{
    render(){
        if (this.props.results) {
            return (
                {/* I believe my array comparison should occur here */}
                <div className="row">
                    {this.props.results.map((key) =>
                        <h1>{key.name}</h1>
                    )}
                </div>
            )
        }
    }
}

应用状态

Props Empty
State characters: Array[2]
 0: {name: "Luke Skywalker"}
 1: {name: "Han Solo"}

Api道具

Props results: array[10]
 0: {gender: "male", name="Luke Skywalker"}
 1: {gender: "male", name="Han Solo"}
 2: {gender: "female", name="Leia Organa"}

因此，上面的结果“Lei Organa”将被省略，因为她在应用程序状态中不存在，我希望这个问题有意义！

TL; DR - 将App.state.characters中的'names'与ApiResponse.props.results进行比较

Answer 1

您肯定有正确的想法，您要做的是针对您的API结果运行filter方法，然后将其与您的应用程序状态进行匹配。

我强烈建议您自己尝试编写一个基本的过滤器，可以在这里找到一个很好的教程：

http://adripofjavascript.com/blog/drips/filtering-arrays-with-array-filter.html

一旦你完成了这项工作，利用lodash＆＃39; _.filter方法（https://lodash.com/docs#filter）就可以快速轻松地完成工作。

最后一点，你可以在ApiResponse的渲染方法中进行过滤，但是我会考虑利用componentWillReceiveProps并在那里进行过滤，让你的渲染尽可能愚蠢。

ReactJS - 数组比较，仅在两个数组中都存在名称时呈现

1 个答案: